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，所以有些不足欢迎留言讨论。

以上关于Html5视频播放插件video.js使用技巧及细节优化的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。