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

1. 插件描述
2. 使用方法
3. 设置 flash 路径
4. html 结构
5. 播放按钮居中
6. 支持<audio>音乐标签
7. 暂停时显示播放按钮
8. 播放按钮变○圆形
9. 点击屏幕播放/暂停
10. 重载视频文件
11. 进度显示当前播放时间
12. 其他方法
• ready
• 播放
• 暂停
• 获取播放进度
• 设置播放进度
• 视频持续时间
• 缓冲
• 百分比的缓冲
• 声音大小（0-1 之间）
• 设置声音大小
• 取得视频的宽度
• 设置宽度
• 获取高度
• 设置高度
• 一步到位的设置大小
• 全屏
• 离开全屏
• 添加事件
• 事件绑定
• 删除事件
13. 相关版本下载地址
• Video.js 最新 v7.5.5 版 2019-7-4 最新
• Video.js 最新 v7.4.1 版 2019-1-9 更新
• Video.js 最新 v7.1.0 版 2018-7-16
• Video.js 最新 v6.6.2 版 2018-1-02 更新
• Video.js v6.2.8 版 2017-11-09 更新
• Video.js v6.2.5 版 2017-8-21 更新
• Video.js v5.18.4 版 2017-3-24 更新(支持 ie8)
• Video.js v5.16 版 2017-2-16 更新
• Video.js v5.10.8 版 2016-10-11 更新
• Video.js v5.8.8 版 2016-4-11 更新
• Video.js 历史 v5.4.3 版 2015-12-09 更新
14. 结语

最近公司项目有一个网页播放需求，在百度搜索了一大圈发现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"  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>标签里面的和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类，就可以了，像这样：

支持<audio>音乐标签

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

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

禁止在 iPhone safari 中自动全屏

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

<video playsinline ></video>

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

暂停时显示播放按钮

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

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

其他方法

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