HTML5视频播放器实现
本文介绍如何使用HTML5的video标签创建一个全屏自适应的视频播放器，并通过JavaScript进行初始化。示例代码展示了如何设置播放器的样式、加载视频源及海报图片等。
废话少说，直接上代码：
<style>
html, body {
margin: 0;
padding: 0;
}
.video-js {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="video_div" style="width: 100%;height: 40vh;background: #0062CC;">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web b</p></video>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
