問題
HTML5のvideoタグをjs側で操ろうとしたら「video.pause is not a function」というエラーが出て動かない。
解決策
「video[0].pause();」という形で指定して設定を行う。
エラー 「video.pause is not a function」
HTML5のvideoタグを、
- PCでは自動再生＋コントロールバーを非表示
- スマホでは自動再生を停止＋コントロールバーを表示
という設定にしようと思い、javascript側で操作しようと試みました。
if($('video').length){
var video = $('video');
if(window.navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
// スマホ（iPhone・Androidスマホ）の場合の処理を記述
video.pause();
video.controls = true;
}else{
// PC・タブレットの場合の処理を記述
video.play();
video.controls = false;
}
}実行したところ、以下のようなエラーが出ました。
Uncaught TypeError: video.pause is not a function
ひたすら調べたところ、以下のページを見付けました。
【css – Play/pause HTML 5 video using JQuery – Stack Overflow】
https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery
どうやらvideoタグの指定において、[0]を設定しなければならなかったようです。
修正後のコード
修正を行ったところ、問題なく動いてくれました。
修正後のコードは以下になります。
if($('video').length){
var video = $('video');
if(window.navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
// スマホ（iPhone・Androidスマホ）の場合の処理を記述
video[0].pause();
video[0].controls = true;
}else{
// PC・タブレットの場合の処理を記述
video[0].play();
video[0].controls = false;
}
}DOM操作における知識をもっと深める必要があると実感した1件でした。
コメント