1、引入zy.media.min.js
<script src="zy.media.min.js"></script>
2、引入zy.media.min.css
<link rel="stylesheet" href="zy.media.min.css">
3、编写HTML
<div class="playvideo">
<div class="zy_media">
<video data-config='{"mediaTitle": "小蝴蝶"}'>
<source src="mov.mp4" type="video/mp4" />
您的浏览器不支持HTML5视频
</video>
</div>
<div id="modelView"> </div>
</div>
4、编写CSS,为HTML赋予样色
#modelView {
background-color: #dddddd;
z-index: 0;
opacity: 0.7;
height: 100%;
width: 100%;
position: relative;
}
.playvideo {
padding-top: auto;
z-index: 9999;
position: relative;
width: 300px;
height: 200px;
}
.zy_media {
z-index: 999999999;
}
5、调用zyMedia
<script>
zymedia("video", {
autoplay: false
});
</script>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!