Mai Suzuki Photo Works

いまさら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>