01 02 03 04 05 06 07 | <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 --> |
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | $(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);}); |
