問題 × 解決策

エラー【video.pause is not a function】HTML5のvideoタグをjs側で操ろうとした時の現象

問題

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件でした。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 + three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧