注册登录

HTML5 Web播放器-Video.js

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

HTML5 Web播放器-Video.js

查看演示 下载源码

获取Video.js

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

NPM

$ npm install --save video.js
知识兔

Bower

$ bower install --save video.js
知识兔

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

<link href="https://zhishitu.com" 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="https://zhishitu.com" 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="https://zhishitu.com" 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。

计算机