HTML5 Web播放器-Video.js
原创文章 作者:月光光 2018年04月09日 19:45helloweba.net 标签:JavaScript HTML5 网页播放器
Video.js是一款优秀的HTML5 Web视频播放器。它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大概有40W的站点在使用Video.js作为web播放器。
获取Video.js
Video.js支持npm和bower方式安装:
NPM
$ npm install --save video.js
Bower
$ bower install --save video.js
也可以在页面中直接通过标签引用CDN资源:
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
当然你也可以下载Video.js到本地,然后引用即可,点击这里下载。
使用Video.js
有了 Video.js ,您只需使用一个HTML5 <video>
标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作,并非只有支持 HTML5 video 的浏览器。除了基本的标记,Video.js 还需要一些额外的标记。
Video.js支持<video>
元素的所有属性(如控件,预加载等),但它也支持它自己的选项。 有两种方法可以创建Video.js播放器并传递选项,但它们都以具有属性class ="video-js"
的标准<video>
元素开头:
<video
id="my-player"
class="video-js vjs-big-play-centered"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//media.html5media.info/video.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//media.html5media.info/video.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
请开启Javascript脚本以便
<a href="http://videojs.com/html5-video-support/" target="_blank">
支持HTML5 video播放器
</a>
</p>
</video>
添加class: vjs-big-play-centered
可以将播放按钮居中,否则播放按钮默认是在播放器的左上角。
现在运行页面,就可以看到一个漂亮的播放器,点击播放按钮即可播放影片。
我们可以使用data-setup
属性来设置video的一些额外的option选项,通常是JSON格式,如:
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>
如果你不想使用auto-setup
,你可以暂时不用设置auto-setup
属性,然后手动初始化一个视频元素。
手动js调用播放器
首先<video>
元素中去掉了auto-setup
属性,其他不变。
<video
id="my-player"
class="video-js vjs-big-play-centered"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
<source src="//media.html5media.info/video.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//media.html5media.info/video.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
请开启Javascript脚本以便
<a href="http://videojs.com/html5-video-support/" target="_blank">
支持HTML5 video播放器
</a>
</p>
</video>
然后,使用videojs()
方法加载Video,如:
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
videojs()
方法中,第一个参数是video
标签的 ID。
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个'ready'
回调。一旦 Video.js 初始化完成后,就会触发这个回调。
完整的js代码如下:
<script>
var player = videojs('my-player');
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
this.play(); // 开始播放
// 监听播放结束状态
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
</script>
更多设置和选项请参考Video.js项目地址:https://github.com/videojs/video.js。
共4条评论
宽如何设置100%呢,设置100%变成了100px
宽高怎么设置啊
效果真的不错啊,可以参考下的
棒棒棒