HTMLのvideoタグの基本と任意の再生ボタンを設置するカスタマイズ方法

2022-07-09 HTML , JavaScript

最終更新日：2022-09-01

HTMLのvideoタグの基本と任意の再生ボタンを設置するカスタマイズ方法をご紹介します。

1 videoタグの基本
2 オリジナル再生ボタンの設置方法
3 スマホで動画が表示されないときの対処法
4 posterでサムネイルが表示されない時の対処法

videoタグの基本

videoタグは

<video src="movie.mp4" poster="movie.jpg" controls muted autoplay playsinline loop></video>

のように使用します。

各属性の概要は

src	動画ファイルへのパス
poster	アイキャッチ画像のパス（指定しない場合は動画の最初）
controls	動画コントロールバーを表示
muted	ミュート（消音）
autoplay	自動再生
playsinline	スマホでインライン再生(ページ内で再生)する
loop	繰り返し再生

です。

例えば

<video src="movie.mp4" autoplay></video>

このように指定するとコントロールバーは表示されず、自動で音声付きで1回のみ再生されます。

これらをふまえて、の続いてブラウザデフォルト再生ボタンではなくオリジナルの再生ボタンにする方法をご紹介します。

オリジナル再生ボタンの設置方法

DEMO

デモのようにオリジナルの再生ボタンを設置するには再生ボタンとコントロールバーの連動をjQueryで制御します。

<div class="movie">
	<video class="video1" poster="movie.jpg" playsinline muted>
		<source src="img/movie.mp4#t=0.001" type="video/mp4">
	</video>
	<img src="img/play-btn.png" class="play-btn" alt="プレイ">
</div>

.movie{
	position: relative;
	width: 60%;
	margin:0 auto;
}
.movie video{
	width: 100%;
}
.movie .play-btn{
	display: block;
	width: 20%;
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateY(-50%) translateX(-50%);
	  -webkit- transform: translateY(-50%) translateX(-50%);
}
.movie .play-btn.playActive{display:none;}

のようなHTML・CSSに対し、
jQueryで

$(function () {
    $('.play-btn').on('click', function(){ // 再生ボタンが押されたら
        if($(this).hasClass('playActive')){
            $('.video1').get(0).pause();
        }else{
            $('.video1').get(0).play();
        }
    });

    $('.video1').on('playing', function(){
        $('.play-btn').addClass('playActive'); 
        $(this).attr('controls', ''); // ブラウザが表示する再生ボタンを非表示にするために後から属性付与
    });

    $(".video1").on('pause', function(){
        $('.play-btn').removeClass('playActive');
        $(this).removeAttr('controls');
    });

    $('.video1').on('ended', function(){ 
        $('.playBt').removeClass('playActive');
        $(this).removeAttr('controls');
    });
});

でOK

簡単に説明すると、最初はコントロールバーを非表示、
再生ボタンクリックでcontrols属性を追加、停止時に再生ボタンを表示
のような動作です。

スマホで動画が表示されないときの対処法

普通にvideoタグで動画を表示する際に、PCでは問題なくても
スマホで動画が表示されないことがあります。
原因はiPhone等の仕様によるものですが、
こちらの対策としてvideoタグで肝になるのは、playsinline mutedです。
もし表示されない時はこちらの属性を追加してみてください。

また、これだけでも表示されないことがありますので
そんな時は

src="img/movie.mp4#t=0.001"

動画のパスの最後に#t=0.001を追加してみてください。
こちらは再生位置の指定記述ですが、
これを追加することで解決することが多いです。

スマホ対策は基本的に必須かと思いますので

<video class="video1" poster="movie.jpg" playsinline muted>
		<source src="img/movie.mp4#t=0.001" type="video/mp4">
</video>

ページ内で動画を扱う際はこの表示を基本形にすることで問題なく表示されることが多いので試してみてください。

posterでサムネイルが表示されない時の対処法

上記の方法で任意の再生ボタンを設置した際にposterで指定したサムネイル画像が表示されないことがありましたので、追記します。

その場合の対処法は

<div class="movie">
	<video class="video1" poster="movie.jpg" playsinline muted>
		<source src="img/movie.mp4#t=0.001" type="video/mp4">
	</video>
<div class="play-btn">
	<img src="img/thumb.png" alt="サムネイル画像" class="thumb">
	<img src="img/play-btn.png" alt="プレイ" class="btn">
</div>
</div>

のようにし、CSSを

.movie .play-btn{
position:abosolute;
width:100%;
height:100%;
left:0;
top:0;
}
.movie .play-btn .thumb{
position:abosolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
}
.movie .play-btn .btn{
	display: block;
	width: 20%;
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateY(-50%) translateX(-50%);
	  -webkit- transform: translateY(-50%) translateX(-50%);
z-index:2;
}
.movie .play-btn.playActive{display:none;}

のようにしてあげることで停止中はサムネイル画像が表示されるようになります。