いまさらvideo要素を実装してみて気づいたことメモ。
iOSだとautoplayしないとかBASIC認証かけてるとiOSでうまく動かないとかトラップがまだ多い。
<video playsinline autoplay class="fillWidth fadeIn wow collapse in" data-wow-delay="0.5s" poster="./assets/bg-top.png" id="video"> このブラウザは動画の再生に対応しておりません。ブラウザのアップデートを推奨いたします。 </video>
動画の再生/停止
video要素、audio要素をJavaScriptから操作する
<a id="play" onclick="vidplay()" class="btn btn-primary btn-xl">Play Video</a>
<script> function vidplay() { var video = document.getElementById("video"); var button = document.getElementById("play"); if (video.paused) { video.play(); button.textContent = "||"; } else { video.pause(); button.textContent = ">"; } } function restart() { var video = document.getElementById("video"); video.currentTime = 0; } function skip(value) { var video = document.getElementById("video"); video.currentTime += value; } </script>
音声ON/OFF
http://www.webshiki.com/javascript/417.html
<button class="btn btn-primary"> <a href="javascript:void(0);" id="sound_button" class="sound_on">SOUND</a> </button>
<script> $("#sound_button").click(function () { if($(this).hasClass("sound_off")) { $(this).removeClass("sound_off"); $(this).addClass("sound_on"); $(this).text("SOUND ON"); $("video").prop('muted', true); } else { $(this).removeClass("sound_on"); $(this).addClass("sound_off"); $(this).text("SOUND OFF"); $("video").prop('muted', false); } }); </script>
シークボタン、オリジナルの再生/停止ボタン
https://liginc.co.jp/web/js/jquery/82904
動画のランダム表示
https://teratail.com/questions/34499
上記を参考に下記のように実装
<video id="video" autoplay loop></video> <script type="text/javascript"> var video = document.getElementById("video"); video.poster = "poster.jpg"; var videolist = new Array( "video1.mp4", "video2.mp4", "video3.mp4", "video4.mp4" ); var videonum = Math.floor(Math.random() * videolist.length); video.src = videolist[vidoenum] ; video.load(); </script>