Video.js


Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。支持mp4、webm、ogv视频格式，也能够插入字幕（要支持ie低版本请下载5.4.3版 ）点击进入官网

下载

各个版本下载

使用

引入文件

1
2
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>

设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件。

1
2
3
<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

HTML

编写html网页的video元素关键在于设置video的属性。通过设置video的属性可以控制视频播放器按你的要求展示。
class属性：第一个参数video-js是必须的，这个属性让video.js知道，要让它来控制这个视频的样式以及功能； 第二个参数用来说明播放器的外观，默认只提供了一种外观“vjs-default-skin”，如果你需要自定义外观就可以将他设置为其他的值 有点让人不习惯的是，video.js的作者认为播放键放在中间会遮住内容，于是把它移到了左上方，但这实在有违对称的美感。不过幸好，它提供了一个参数将播放键改回中央：“vjs-big-play-centered” width和height参数用来指示播放器的长和高，没什么可说的 有preload参数来控制视频的加载，其值为”auto”时视频随网页自动自动加载，”none”时不预先加载 它还允许设置视频播放前的封面，当然如果你不指定会是视频的第一帧，其值为封面图片的地址。 这是一个video.js提供的样例，一般不需要什么修改。

1
2
3
4
5
6
7
8
<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{ }'>
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>

如果你还对播放按钮样式不满意可重新定义video-js .vjs-big-play-button{/*这里的样式重写*/}

初始化

Video.js初始化有两种方式。

1、标签方式

一种是在

2、JS方式 (为动态加载的 HTML 元素设置 Video.js)

如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性，做法如下:

1、将 data-setup 属性从 video 标签中移除掉，避免播放器混乱。并且需要传入

1
2
3
4
5
6
7
8
9
10
11
12
13
var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});
  • videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。
  • 第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
  • 第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后，就会触发这个回调。

播放按钮居中

video.js默认的播放按钮在左上角，应该是 video.js 开发人员认为放中间会遮挡内容，所以没放中间。
不过我们常见的一般都在中间，比较符合习惯。
这是可以通过参数修改的，在标签中加入vjs-big-play-centered类，就可以了。
像这样：
class="video-js vjs-big-play-centered"

暂停时显示播放按钮

video.js 在未播放时，会显示一个大的播放按钮，上面我们提到如何让他居中。
那么，如何在视频暂停时也显示这个播放按钮呢？


QQ截图20170308103219.png

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

其实用CSS就可以搞定了：

.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; }
是不是很轻便很简单 :）

播放按钮变○圆形

video.js 默认的播放按钮是圆角矩形，我们一般更熟悉播放按钮为圆形的：


unnamed-file.png

那么怎么改呢？还是用CSS来解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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的值也要相应改变

禁止在iPhone safari中自动全屏

方法如下，在

1
<video playsinline ></video>

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

点击屏幕播放/暂停

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

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

pointer-events是CSS的一个属性，用来控制鼠标的动作，具体可参考《CSS里的pointer-events属性》。

进度显示当前播放时间

color{red}{video.js} 默认倒序显示时间，也就是视频播放的剩余时间。
要显示当前的播放时间，以及总共视频时长，加2行CSS解决：

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

重载视频文件

总有那么一些情形，我们需要 video.js 重新载入视频文件。
比如，立即播放刚上传的文件。
例如这样的标签：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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();
});

videojs使用方式就是以类似的方式开始的，不过由于我们借助videojs对视频进行一些控制或制定

1
2
3
4
5
6
7
8
var player = videojs('example_video_1',{
    muted: true,
    controls : true/false,      
    height:300,
    width:300,
    loop : true,
    // 更多配置.....
});

常用事件

  • 播放 this.play()
  • 停止 – video没有stop方法，可以用pause 暂停获得同样的效果
  • 暂停 this.pause()
  • 销毁 this.dispose()
  • 监听 this.on(‘click‘,fn)
  • 触发事件this.trigger(‘dispose‘)
1
2
3
4
5
6
7
8
9
10
11
12
13
var options = {};
 
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
  videojs.log(‘播放器已经准备好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件监听？
  this.on(‘ended‘, function() {
    videojs.log(‘播放结束了!‘);
  });
});

videojs初始化播放器后获得player，在window下，把this挂载到window.player上，就可以用this或player了

1
2
3
4
videojs("example_video_1", {}, function() {
        window.Player = this;
        Player.play();
    });

场景使用补充

场景1:实时监控

在当需要实时监听视频进度的时候，比如我遇到的场景是课程视频有试听课，只能试听这个视频的前多少分钟。这个时候，不管是普通播放还是拖动进度条都需要实时监听播放的时间进度，判断是否大于试听时间，进行对应操作。

1
2
3
4
5
6
7
8
9
// 判断试听时间
if(b){
    window.loopMarquee = setInterval(function(){
        if(player.currentTime() >= listenTime){
            player.pause();
            $(".gobuy").fadeIn(200);
        }
    },500) // 设置每500秒查询一次
}

场景2: 记录观看历史，下次从上次位置打开

思路:在离开页面时触发得到当前播放时间，存到数据库，下一次加载时从数据库取，如果有history_time则用player.currentTime(historyTime),没有的话，正常从头播放。

1
2
3
$( window ).unload(function() {
    getVideoTime();
});

常用选项

  • autoplay : true/false 播放器准备好之后，是否自动播放 【默认false】
  • controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
  • height: 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px‘
  • width: 视频容器的宽度, 字符串或数字 单位像素
  • loop : true/false 视频播放结束后，是否循环播放
  • muted : true/false 是否静音
  • poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
  • preload:预加载
    ‘auto‘ 自动
    ’metadata‘ 元数据信息 ，比如视频长度，尺寸等
    ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
  • children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。

常用方法

  • 播放：player.play();
  • 暂停：player.pause();
  • 获取播放进度：var whereYouAt = player.currentTime();
  • 设置播放进度：player.currentTime(120);
  • 视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效: var howLongIsThis = player.duration();
  • 缓冲，就是返回下载了多少: `var whatHasBeenBuffered = player.buffered();
  • 百分比的缓冲: var howMuchIsDownloaded = player.bufferedPercent();
  • 声音大小（0-1之间）: var howLoudIsIt = player.volume();
  • 设置声音大小: player.volume(0.5);
  • 取得视频的宽度: var howWideIsIt = player.width();
  • 设置宽度：player.width(640);
  • 获取高度: var howTallIsIt = player.height();
  • 设置高度：: player.height(480);
  • 一步到位的设置大小：player.size(640,480);
  • 全屏: player.enterFullScreen();
  • 离开全屏 : player.enterFullScreen();

添加事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

事件绑定

1
2
3
4
5
6
player.on("ended", function(){
    console.log("end", this.currentTime());
});
player.on("pause", function(){
    console.log("pause")
});

删除事件

1
player.removeEvent(“eventName”, myFunc);

参考文章
https://www.jianshu.com/p/3b38f795616f
https://www.jianshu.com/p/9414886a8963
https://www.jianshu.com/p/dca80ecda570
https://blog.csdn.net/a0405221/article/details/80923090
https://www.awaimai.com/2053.html
https://www.cnblogs.com/afrog/p/4115377.html
https://www.cnblogs.com/meelo/p/4304536.html