分类
<!--封装好的视频布局样式--> <link rel="stylesheet" href="css/jsmodern.min.css"> <style> #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; } </style>
<script src="js/jquery.min.js"></script> <!--mp4视频插件--> <script src="js/jsmodern.min.js"></script>
<div id="video"> <video src="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4" id="videoShow"></video> <span class="VideoBtn"><img src="images/bo1.png"></span> </div> <!--视频插件调用方法--> <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>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。