Web播放器,同时支持 HTM5 和 Flash 视频Video.js

Video.js是一款优秀的HTML5 Web视频播放器。它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大概有40W的站点在使用Video.js作为web播放器。

152341347977

获取Video.js

Video.js支持npm和bower方式安装:

NPM

Code:

  1. $ npm install --save video.js

Bower

Code:

  1. $ bower install --save video.js

也可以在页面中直接通过标签引用CDN资源:

Code:

  1. <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  2. <script src="https://unpkg.com/video.js/dist/video.js">script>

当然你也可以下载Video.js到本地,然后引用即可,点击这里下载。

使用Video.js

有了 Video.js ,您只需使用一个HTML5  标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作,并非只有支持 HTML5 video 的浏览器。除了基本的标记,Video.js 还需要一些额外的标记。

Video.js支持元素的所有属性(如控件,预加载等),但它也支持它自己的选项。 有两种方法可以创建Video.js播放器并传递选项,但它们都以具有属性class ="video-js"的标准元素开头:

Code:

  1. <video
  2. id="my-player"
  3. class="video-js vjs-big-play-centered"
  4. controls
  5. preload="auto"
  6. poster="//vjs.zencdn.net/v/oceans.png"
  7. data-setup='{}'>
  8. <source src="//media.html5media.info/video.mp4" type="video/mp4">source>
  9. <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">source>
  10. <source src="//media.html5media.info/video.ogv" type="video/ogg">source>
  11. <p class="vjs-no-js">
  12. 请开启Javascript脚本以便
  13. <a href="http://videojs.com/html5-video-support/" target="_blank">
  14. 支持HTML5 video播放器
  15. a>
  16. p>
  17. video>

添加class: vjs-big-play-centered可以将播放按钮居中,否则播放按钮默认是在播放器的左上角。

现在运行页面,就可以看到一个漂亮的播放器,点击播放按钮即可播放影片。

我们可以使用data-setup属性来设置video的一些额外的option选项,通常是JSON格式,如:

Code:

  1. <video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>

如果你不想使用auto-setup,你可以暂时不用设置auto-setup属性,然后手动初始化一个视频元素。

手动js调用播放器

首先元素中去掉了auto-setup属性,其他不变。

Code:

  1. <video
  2. id="my-player"
  3. class="video-js vjs-big-play-centered"
  4. controls
  5. preload="auto"
  6. poster="//vjs.zencdn.net/v/oceans.png">
  7. <source src="//media.html5media.info/video.mp4" type="video/mp4">source>
  8. <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">source>
  9. <source src="//media.html5media.info/video.ogv" type="video/ogg">source>
  10. <p class="vjs-no-js">
  11. 请开启Javascript脚本以便
  12. <a href="http://videojs.com/html5-video-support/" target="_blank">
  13. 支持HTML5 video播放器
  14. a>
  15. p>
  16. video>

然后,使用videojs()方法加载Video,如:

Code:

  1. videojs("example_video_1", {}, function(){
  2. // Player (this) is initialized and ready.
  3. });

videojs()方法中,第一个参数是video标签的 ID。

第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。

第三个参数是一个'ready'回调。一旦 Video.js 初始化完成后,就会触发这个回调。

完整的js代码如下:

Code:

  1. <script>
  2. var player = videojs('my-player');
  3. var options = {};
  4. var player = videojs('my-player', options, function onPlayerReady() {
  5. videojs.log('Your player is ready!');
  6. this.play(); // 开始播放
  7. // 监听播放结束状态
  8. this.on('ended', function() {
  9. videojs.log('Awww...over so soon?!');
  10. });
  11. });
  12. </script>
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《Web播放器,同时支持 HTM5 和 Flash 视频Video.js》
文章链接:https://www.vvso.cn/xlbk/13864.html
分享到: 更多 (0)

热门文章

评论 抢沙发

切换注册

登录

忘记密码 ?

切换登录

注册