网页视频播放器插件 Video.js
介绍
Videojs 插件支持 HTML5 视频和 Flash 视频,YouTube 和 Vimeo,他支持PC端和移动端的视频播放。该项目从2010年中旬出现到现在已经超过 50,000 100,000 200,000 网站在使用了。
用法
在的需要插入视频的页面的 head 标签之间像下面这样引入相关文件就可以了
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
在需要显示视频的地方通过video 标签引入视频
<video id="really-cool-video" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
data-setup='{}'>
<source src="really-cool-video.mp4" type="video/mp4">
<source src="really-cool-video.webm" type="video/webm">
<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>
如果你不想默认设置,你可以取消默认的属性值,然后手动初始化视频元素。
var player = videojs('really-cool-video', { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
相关资料
官方网站:http://videojs.com/
GitHub: https://github.com/videojs/video.js
-
微信扫一扫,赏我
-
支付宝扫一扫,赏我