月: 2022年6月

<video id="video01" src="movie.mp4" autoplay muted loop controls playsinline></video>
<div class="control">
<divid="play" class="hidden"><iclass="fa fa-play"></i></div>
<divid="stop"><iclass="fa fa-pause"></i></div>
<divid="mute"><iclass="fa fa-volume-off"></i><iclass="fa fa-volume-up hidden"></i></div>
</div>
<!-- /.control -->

    $(function() {
        // 操作対象のvideoを指定
        var video = $('#video01').get(0);
        // 動画の再生 
        $('#play').click(function() {
            $('#play').addClass('hidden');
            $('#stop').removeClass('hidden');
            video.play();
        });
        // 動画の一時停止
        $('#stop').click(function() {
            $('#play').removeClass('hidden');
            $('#stop').addClass('hidden');
            video.pause();
        });
        // 動画の頭出し（任意の秒へ移動）
        $('#atama').click(function() {
            video.currentTime = 0; // 入れた秒の位置へ移動（例は0秒）
        });
        // 音声ミュート（トグル式）
        $('#mute').click(function() {
            if (video.muted) {
                video.muted = false;
                $('#mute .fa-volume-off').addClass('hidden');
                $('#mute .fa-volume-up').removeClass('hidden');
            } else {
                video.muted = true;
                $('#mute .fa-volume-off').removeClass('hidden');
                $('#mute .fa-volume-up').addClass('hidden');
            }
        });
        //音量アップ
        $('#vol-up').click(function() {
            if (video.volume <= 0.75) {
                video.volume = video.volume + 0.25;
                $("#vol").text(video.volume);
            }
        });
        //音量ダウン
        $('#vol-down').click(function() {
            video.volume = video.volume - 0.25;
            $("#vol").text(video.volume);
        });
        //音量表示
        $("#vol").text(video.volume);
    });