Edited at

videoタグの動画埋め込み時に、画面クリックで再生、ポーズを設定する方法

More than 1 year has passed since last update.


内容

videoタグでの動画埋め込み時は、通常コントローラーの再生ボタン等でしか操作ができない。ただそれだとyoutubeのように動画画面クリックで再生・ポーズに対応するデバイスに慣れている利用者にはUI的にイマイチだと思い方法を模索した。


実装

動画画面全体を覆う空divを作り、それにjavascriptで再生・ポーズのアクションを割り当ててるだけ。

気をつけた点は、、、


  • divで動画全体を覆う際に通常のコントローラーも覆ってしまうと、コントローラーでの操作ができなくなるでその部分のみ覆わないように調整

  • 再生、ポーズの動作の違いをstatus変数+ifで調整


html

<div class="video-wrap">

<video muted controls poster="test-movie.jpg" id="video">
<source src="test.mp4" type="video/mp4" />
<img src="test-movie.jpg" />
</video>
<div class="video-btn" id="video-btn"></div>
</div>


css

.video-wrap {

position: relative;
}
.video-btn {
content: "";
position: absolute;
top:0;
left:0;
right:0;
bottom:40px; /*コントローラー分下部に余白を*/
cursor: pointer;
}


javascript

  //video要素の取得

var video = document.getElementById('video');
//videoボタンの取得
var video_btn = document.getElementById('video-btn');
//状態保存
var btn_status = 0;

//画面クリックで再生・ポーズ
video_btn.addEventListener('click', function () {
if(btn_status === 0) {
video.play();
btn_status = 1;
}else {
video.pause();
btn_status = 0;
}
});