HTML 標簽 - 視頻播放功能

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);

})