网页视频播放器video.js

WEB前端

video.js是一个集成HTML5和Flash的开源网页视频播放器,video.js自动检测浏览器对HTML5的支持情况,如果不支持HTML5则自动使用Flash播放器。目前有超过200000多的网站正在使用vedio.js,作为网页视频播放器。video.js可以很好的解决浏览器的视频播放器样式的兼容性。

1
2
3
4
5
6
//如果支持ie8,请引入videojs-ie8.min.js。Video.js 5.0是基于ES5, 但是ie8支持ES3。
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>//引入vedio.js和样式<script src="/path/video.min.js"></script>
<script>
//配置本地的video-js.swf路径
videojs.options.flash.swf = "/path/video-js.swf"
</script>

HTML代码
默认的按钮在右上角,vjs-big-play-centered类可以设置为居中。poster:设置封面图片。最好设置MP4、webm、ogg三种格式,这样大部分浏览器都支持了。

1
2
3
4
5
6
<video id="example_video_1" class="video-js vjs-default-skin" poster="http://video-js.zencoder.com/oceans-clip.png" preload="auto" controls="controls" width="640" height="264" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

来源:网页视频播放器video.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注