KH-WEBLOG TOP > WEBメモ > HTML > HTMLのvideoタグの基本と任意の再生ボタンを設置するカスタマイズ方法

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

最終更新日:

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

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回のみ再生されます。

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

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

プレイ

デモのようにオリジナルの再生ボタンを設置するには再生ボタンとコントロールバーの連動を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>

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事