html mp4播放器插件,jQuery mp4视频播放器插件

使用方法：

1、head引入css文件

#video {

width: 970px;

height: 594px;

margin: 0 auto;

position: relative;

}

#video video {

width: 100%;

height: 100%;

object-fit: fill;

}

.VideoBtn {

position: absolute;

left: 50%;

top: 50%;

display: block;

width: 70px;

height: 70px;

margin-left: -35px;

margin-top: -35px;

cursor: pointer;

z-index: 10;

}

2、head引入js文件

3、body引入HTML代码

$(function () {

//视频

jsModern.video("#video");

//播放视频

$(".VideoBtn").click(function () {

var video = document.getElementById("videoShow");

video.play();

$('.VideoBtn').hide();

})

//监听视频的播放状态

var video = document.getElementById("videoShow");

video.oncanplay = function () {

$(".VideoBtn").show();

//$("#video").attr("poster","");

}

//视频播放事件

video.onplay = function () {

$("#videoShow").attr("poster", "");

$(".VideoBtn").hide();

};

video.onplaying = function () {

$(".VideoBtn").hide();

};

//视频暂停事件

video.onpause = function () {

$(".VideoBtn").show();

};

//点击视频周围暂停播放图片出现

video.onclick = function () {

if (video.paused) {

$(".VideoBtn").hide();

video.play();

} else {

$(".VideoBtn").show();

video.pause();

}

};

})