WEB系キャンパス

Videoタグで動画終了後にもう一度再生するボタンを設置する方法（jQuery）

video

コーポレートサイトなどでメインビジュアルに動画を入れているサイトを見かけます。
一般的にはイメージ映像が多く、常に再生を続けるリピート再生が多いのですが、今回は以下のような動きをvideoタグとCSSとjQueryで実装しました。

  • 映像をリピート再生させさせない。
  • 映像は流れっぱなし（プレイヤーなし）
  • 1回再生が終われば再生ボタンが表示される。
  • クリックでもう一度動画を再生する

HTML5のvideo要素、audio要素にはJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されているので、そちらを使用しました。

先にDEMOを貼っておきます。
DEMO

HTML5のvideoタグを使用

ソースを表示
印刷SyntaxHighlighterについて
1<div class="main_video">
2  <video muted controlslist="nodownload" autoplay preload="metadata" src="freebies_037_ws.mp4" id="video" webkit-playsinline playsinline/>
3    <source src="freebies_037_ws.webm" type="video/webm">
4    <source src="freebies_037_ws.mp4" type="video/mp4"/>
5    <p>動画を再生できる環境ではありません。</p>
6  </video>
7    <div class="video-btn" id="video-btn"></div>
8</div>
9<!-- /.main_video -->

videoタグを「.main_video」で囲って、その中に最後の再生用の「.video-btn」を用意。

jQueryで動画の再生を制御

ソースを表示
印刷SyntaxHighlighterについて
1  $( window ).ready(function(){
2    var video = document.getElementsByTagName('video')[0];
3    video.addEventListener('ended', function() {
4    video.load();
5    $(".main_video").addClass("finished");
6    video.autoplay=false;
7}, false);
8});
9var video = document.getElementById('video');
10var video_btn = document.getElementById('video-btn');
11var btn_status = 0;
12 
13//画面クリックで再生
14video_btn.addEventListener('click', function () {
15    video.play();
16    video.currentTime = 0 ;
17    $(".main_video").removeClass("finished");
18    btn_status = 1;
19});

CSSでレイアウト調整

ソースを表示
印刷SyntaxHighlighterについて
1.main_video {
2    position: relative;
3    display: block;
4    width: 100%;
5}
6.main_video video {
7    width: 100%;
8    vertical-align: bottom;
9}
10.video-btn {
11    top:0;
12    left:0;
13    right:0;
14    bottom:40px;
15    cursor: pointer;
16}
17 
18.finished .video-btn {
19    position: absolute;
20}
21.finished .video-btn:after {
22    position: absolute;
23    left: 0;
24    top: 0;
25    right: 0;
26    bottom: 0;
27    content: "\f144";
28    width: 1em;
29    height: 1em;
30    margin: auto;
31    font-family: "Font Awesome 5 Free";
32    color: #fff;
33    font-size: 50px;
34    line-height: 1em;
35}

動画終了後に「.finished」というclassが付与されるよう、jQueryを記述しているので、再生ボタンが真ん中に表示されるようにCSSを記述しています。

再生ボタンは画像でも何でもOKですが、今回はWEBアイコンの「fontawesome」を使用しています。

「font awesome」の使用方法は、下記エントリーで確認するか、ググってください。

WEBアイコンフォントを呼び込むFont Awesomeの使用方法まとめ

iOSで動画をインライン再生する設定をする

iOSではvideoタグをタップすると、動画が勝手にフルスクリーンで再生されてしまうので、videoタグに「playsinline」を指定する必要があります。

ソースを表示
印刷SyntaxHighlighterについて
1<video muted controlslist="nodownload" autoplay preload="metadata" src="freebies_037_ws.mp4" id="video" webkit-playsinline playsinline/>
2  <source src="freebies_037_ws.webm" type="video/webm">
3  <source src="freebies_037_ws.mp4" type="video/mp4"/>
4  <p>動画を再生できる環境ではありません。</p>
5</video>

動画をオンラインで圧縮してくれるサイト

HTML5のvideoタグで動画を表示させる動画の拡張子はmp4を使うのが一般的ですが、動画編集ソフト（PremierePro）とかで動画を普通に書き出すとファイル量がかなり高いです。
最低でも10M以下、欲を言えば５M以下ぐらいにした方がサイトの表示速度に負担をかけません。
動画圧縮系のアプリはたくさんありますが、オンラインで圧縮するサービスもあるので、アプリをダウンロードするのが、めんどくさい場合はそちらを使います。

今回はこちらのオンラインサービスを使いました。
圧縮の荒れが結構少なくて、いい感じでした。
動画のファイルサイズをオンラインで小さくする、動画をオンラインで圧縮する (MP4, AVI, MOV, MPEG) | VideoSmaller

参考サイト

こちらの記事もあわせてどうぞ

コメントを残す

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