当前位置： 旋风说(旋风PHPer分享网)> 技术文章> 正文
包含手机端和电脑端，手机版包括：苹果端、安卓端（含微信内置浏览器和手机内置浏览器），全部可以使用此代码。
用的就是html5的video标签，video里面的poster是视频播放前的视频预览图，不指定poster会显示为空或者视频第一个画面（视设备而定，建议设置poster），点击播放按钮后就会消失不见。
相关视频从网上下载，如有侵权请联系我方下架，谢谢。
PC版效果图:
手机版效果图：
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery MP4视频播放器代码</title>
<!--封装好的视频布局样式-->
<link rel="stylesheet" href="css/jsmodern.min.css">
<script src="js/jquery.min.js"></script>
<!--mp4视频插件-->
<script src="js/jsmodern.min.js"></script>
<!--视频插件调用方法-->
<script>
$(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();
}
};
})
</script>
</head>
<body>
<div id="video">
<video src="test.mp4" poster='background.jpg' id="videoShow"></video>
<span class="VideoBtn"><img src="images/start.png"></span>
</div>
</body>
</html>下载链接: https://pan.baidu.com/s/1dYoL4cOoV6GnuwhkgdmMeg 提取码: kgec
当您发现内容错误或代码bug，以及下载链接无法使用等，请点击屏幕右下角的上报错误来进行提交，我们会尽快修正。
本程序所有源码和工具完全免费，当本网站内容如果侵犯了您的权益，请联系我们，我们会尽快处理，感谢您的合作。
下一篇： CSS3选择器
相关文章
评论：
文明上网理性发言，请遵守 新闻评论服务协议
上报错误
