- 2019年07月01日
- Javascript
- video, メインビジュアル
Videoタグで動画終了後にもう一度再生するボタンを設置する方法（jQuery）
コーポレートサイトなどでメインビジュアルに動画を入れているサイトを見かけます。
一般的にはイメージ映像が多く、常に再生を続けるリピート再生が多いのですが、今回は以下のような動きをvideoタグとCSSとjQueryで実装しました。
- 映像をリピート再生させさせない。
- 映像は流れっぱなし（プレイヤーなし）
- 1回再生が終われば再生ボタンが表示される。
- クリックでもう一度動画を再生する
HTML5のvideo要素、audio要素にはJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されているので、そちらを使用しました。
先にDEMOを貼っておきます。
DEMO
HTML5のvideoタグを使用
<div class="main_video">
<video muted controlslist="nodownload" autoplay preload="metadata" src="freebies_037_ws.mp4" id="video" webkit-playsinline playsinline/>
<source src="freebies_037_ws.webm" type="video/webm">
<source src="freebies_037_ws.mp4" type="video/mp4"/>
<p>動画を再生できる環境ではありません。</p>
</video>
<div class="video-btn" id="video-btn"></div>
</div>
<!-- /.main_video -->
videoタグを「.main_video」で囲って、その中に最後の再生用の「.video-btn」を用意。
jQueryで動画の再生を制御
$( window ).ready(function(){
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended', function() {
video.load();
$(".main_video").addClass("finished");
video.autoplay=false;
}, false);
});
var video = document.getElementById('video');
var video_btn = document.getElementById('video-btn');
var btn_status = 0;
//画面クリックで再生
video_btn.addEventListener('click', function () {
video.play();
video.currentTime = 0 ;
$(".main_video").removeClass("finished");
btn_status = 1;
});
CSSでレイアウト調整
.main_video {
position: relative;
display: block;
width: 100%;
}
.main_video video {
width: 100%;
vertical-align: bottom;
}
.video-btn {
top:0;
left:0;
right:0;
bottom:40px;
cursor: pointer;
}
.finished .video-btn {
position: absolute;
}
.finished .video-btn:after {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: "\f144";
width: 1em;
height: 1em;
margin: auto;
font-family: "Font Awesome 5 Free";
color: #fff;
font-size: 50px;
line-height: 1em;
}
動画終了後に「.finished」というclassが付与されるよう、jQueryを記述しているので、再生ボタンが真ん中に表示されるようにCSSを記述しています。
再生ボタンは画像でも何でもOKですが、今回はWEBアイコンの「fontawesome」を使用しています。
「font awesome」の使用方法は、下記エントリーで確認するか、ググってください。
WEBアイコンフォントを呼び込むFont Awesomeの使用方法まとめ
iOSで動画をインライン再生する設定をする
iOSではvideoタグをタップすると、動画が勝手にフルスクリーンで再生されてしまうので、videoタグに「playsinline」を指定する必要があります。
<video muted controlslist="nodownload" autoplay preload="metadata" src="freebies_037_ws.mp4" id="video" webkit-playsinline playsinline/>
<source src="freebies_037_ws.webm" type="video/webm">
<source src="freebies_037_ws.mp4" type="video/mp4"/>
<p>動画を再生できる環境ではありません。</p>
</video>
動画をオンラインで圧縮してくれるサイト
HTML5のvideoタグで動画を表示させる動画の拡張子はmp4を使うのが一般的ですが、動画編集ソフト（PremierePro）とかで動画を普通に書き出すとファイル量がかなり高いです。
最低でも10M以下、欲を言えば５M以下ぐらいにした方がサイトの表示速度に負担をかけません。
動画圧縮系のアプリはたくさんありますが、オンラインで圧縮するサービスもあるので、アプリをダウンロードするのが、めんどくさい場合はそちらを使います。
今回はこちらのオンラインサービスを使いました。
圧縮の荒れが結構少なくて、いい感じでした。
動画のファイルサイズをオンラインで小さくする、動画をオンラインで圧縮する (MP4, AVI, MOV, MPEG) | VideoSmaller
