HTML <video>标签 - 视频播放功能
1、html代码部分:
<div class="video_box"> <video id="video" src="https://xxx-cn-xxx.com/otherVideo/810.mp4" poster="images/video_bg.jpg" x5-playsinline="" playsinline="" webkit-playsinline=""></video> <div class="video_play" id="play"> <img src="images/play.png" alt=""> </div></div>
2、js代码部分
$(function() {
//视频播放 var video = document.getElementById("video"); var play = document.getElementById("play"); play.onclick = function() { if(video.paused) { video.play(); //播放 $('#play').fadeOut(); //播放按钮隐藏 }else { video.pause(); //暂停 } } video.onclick = function() { video.pause(); //暂停 $('#play').fadeIn(); //播放按钮显示 } //结束 video.addEventListener('ended', function() { $('#play').fadeIn(); }, false);
})
赞 (0)
