网站首页 » 前端开发 » HTML5 » 网页视频播放器插件 Video.js
上一篇:
下一篇:

网页视频播放器插件 Video.js

videojs-plugin-usage

介绍

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/

官方文档:http://docs.videojs.com/

GitHub: https://github.com/videojs/video.js

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/videojs-plugin-usage/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END