Html5视频播放插件video.js使用技巧及细节优化

最近公司项目有一个网页播放需求，在百度搜索了一大圈发现video.js这个视频播放插件能够很好满足需求，于是果断拿下来使用，其中也对 video.js 视频插件默认的样式进行了一个优化，特此整理一下，方便需要的小伙伴提供参考，也是对自己使用过程的一个总结。

插件描述

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持 ie 低版本请下载 5.4.3 版，文章最下方会附上相关版本链接，下载即可！ ）

使用方法

在页面中引用 video-js.css 样式文件和 video.js 文件

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置 flash 路径

Video.js 会在不支持 html5 的浏览中使用 flash 播放视频文件，具体设置如下：

videojs.options.flash.swf = "video-js.swf";

html 结构

<video id="example_video_1" class="video-js vjs-default-skin" poster="default.jpg" preload="none" controls="controls" width="640" height="264" data-setup="{}">
    <source src="http://视频地址格式 1.mp4" type="video/mp4" />
    <source src="http://视频地址格式 2.webm" type="video/webm" />
    <source src="http://视频地址格式 3.ogv" type="video/ogg" />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
</video>

poster="default.jpg"是用来设置播放的初始图。可使用三种视频格式，大家根据所需要格式选择对应的。

注意：在<video>标签里面的class="video-js"和data-setup='{}'属性，两者缺一不可。

刚开始的时候我觉得后面的值为空对象{}，不放也行，

导致播放器加载不出来，后来加上来就可以了。

设置自动播放将下面代码加到 html 中代码后面：

var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function(){
  var myPlayer = this;
  myPlayer.play();
});

另外一种初始化 video.js 的方法是通过 JS，格式：

var player = videojs('my-player');

这样有个要求，就是不能配置data-setup，并且需要传入<video>的id。

当然，如果不想一个个初始化，可以这样：

(function(){
    var videos = document.getElementsByTagName('video');
    for(i=0; i<videos.length; i++) { var video = videos[i]; if(video.className.indexOf('video-js') > -1) {
            videojs(video.id).ready(function(){
            });
        }
    }
})();

播放按钮居中

默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，可以通过参数修改的，在<video>标签中加入vjs-big-play-centered类，就可以了，像这样：

class="video-js vjs-big-play-centered"

支持<audio>音乐标签

video.js 4.9版本开始支持<audio>标签，与video不同的是：播放audio时封面不会消失。

但是上面的播放框还是一直在的，配置方式和<video>标签一样，也必须要配置data-setup参数。

禁止在 iPhone safari 中自动全屏

方法如下，在<video>标签中加入playsinline参数，

<video playsinline ></video>

注意，在 iOS10 之前用的是webkit-playsinline。

暂停时显示播放按钮

video.js 在未播放时，会显示一个大的播放按钮，上面我们提到如何让他居中。

那么，如何在视频暂停时也显示这个播放按钮呢？如下图：

有很多用 JS 的解决办法，感觉都挺麻烦的。

其实用 CSS 就可以搞定了：

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

是不是很轻便很简单，哈哈.

播放按钮变○圆形

video.js 默认的播放按钮是圆角矩形，

我们一般更熟悉播放按钮为圆形的，如下图：

如何修改呢？当然还是用 CSS 来解决喽。

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

因为原来居中的时候宽度和高度改变了，所以 margin 的值也要相应改变

点击屏幕播放/暂停

这个是视频播放的时候用得较多的功能，解决方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-events是CSS的一个属性，用来控制鼠标的动作。

重载视频文件

总有那么一些情形，我们需要 video.js 重新载入视频文件。

比如，立即播放刚上传的文件。

例如这样的标签：

<video id="example_video">
    <source id="videoMP4" src="1.mp4" />
</video>
<button id="reload">重载</button>

在 video.js 中，用现成的 js 方法就可以实现：

var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("#reload").click(function() {
    video.pause()
    source.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

或者：

var video = document.getElementById('example_video');
$("#reload").click(function() {
    video.pause()
    video.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

进度显示当前播放时间

video.js 默认倒序显示时间，也就是视频播放的剩余时间，如下图：

要显示当前的播放时间，以及总共视频时长，加 2 行 CSS 解决：

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

最终效果如下：

其他方法

var myPlayer = videojs('example_video_1');

ready

myPlayer.ready(function(){
    //在回调函数中，this 代表当前播放器，
    //可以调用方法，也可以绑定事件。
})

播放

myPlayer.play();

暂停

myPlayer.pause();

获取播放进度

var whereYouAt = myPlayer.currentTime();

设置播放进度

myPlayer.currentTime(120);

视频持续时间

加载完成视频才可以知道视频时长，且在 flash 情况下无效

var howLongIsThis = myPlayer.duration();

缓冲

就是返回下载了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1 之间）

var howLoudIsIt = myPlayer.volume();

设置声音大小

myPlayer.volume(0.5);

取得视频的宽度

var howWideIsIt = myPlayer.width();

设置宽度

myPlayer.width(640);

获取高度

var howTallIsIt = myPlayer.height();

设置高度

myPlayer.height(480);

一步到位的设置大小

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

离开全屏

myPlayer.enterFullScreen();

添加事件

durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
  
var myFunc = function(){
    // Do something when the event is fired
};

事件绑定

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});

删除事件

myPlayer.removeEvent(“eventName”, myFunc);

相关版本下载地址

Video.js 最新 v7.5.5 版 2019-7-4 最新

Bug 修复:

• 在自动播放直播时的一些问题

点击下载地址  提取码：56oa

Video.js 最新 v7.4.1 版 2019-1-9 更新

错误修复：

• 使用 VoiceOver 显示当前时间和持续时间
• 修复进度栏中隐藏的控制文本
• 更好的适应屏幕阅读器用户
• 追加 UKR 翻译并修复检查翻译命令
• 改进 sv lang 文件

点击下载地址 提取码：y5gc

Video.js 最新 v7.1.0 版 2018-7-16

(7.0 以上版本相比之前版本文件大了很多，对文件大小有要求的朋友请选择 7.0 以下版本)

功能：

• 自动播放：扩展自动播放选项以获得更好的效果
• 浏览器：在检测谷歌浏览器时包含 iOS Chrome UA 模式
• 全屏切换：如果全屏不可用，则禁用 fs 按钮

Bug 修复：

• 除了 DOM 对象外，允许对象（如组件和插件）监听窗口对象。
• 浏览器：使用 Win10 进行 TOUCH_ENABLED 检测

代码重构：

• 删除了旧的 bug 解决方法代码

性能改进：

• setTimeout 和 requestAnimationFrame 内存泄漏

还原：

• 修复：除了 DOM 对象之外，允许对象（例如组件和插件）监听窗口对象

点击下载地址 提取码：hfh6

Video.js 最新 v6.6.2 版 2018-1-02 更新

Bug 修复：

• 进度条时间工具提示 bug 通过添加 word-break css reset
• 在寻求  时, 在 Safari 中拒绝未处理的承诺

例行工作：

• netlify：在 netlify 命令中添加一些调试信息

点击下载地址 提取码：n8f3

Video.js v6.2.8 版 2017-11-09 更新

点击下载地址 提取码：a4gn

Video.js v6.2.5 版 2017-8-21 更新

点击下载地址 提取码：mo20

Video.js v5.18.4 版 2017-3-24 更新(支持 ie8)

点击下载地址 提取码：5vxs

Video.js v5.16 版 2017-2-16 更新

点击下载地址 提取码：2dd5

Video.js v5.10.8 版 2016-10-11 更新

点击下载地址 提取码：xbi4

Video.js v5.8.8 版 2016-4-11 更新

点击下载地址 提取码：6wt1

Video.js 历史 v5.4.3 版 2015-12-09 更新

点击下载地址 提取码：jbq5

结语

以上就是码云笔记整理的关于 Html5 视频播放插件 video.js 使用技巧及细节优化全部内容，因为我也是第一次使用 video.js，所以有些不足欢迎留言讨论。