HTML 標籤 - 視頻播放功能

一、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>

 

二、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);
})