vue video.js使用技巧

Z时代
2024-01-10
分类：综合

vue

1 初始化

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

1.1 标签方式

一种是在<video>标签里面加上class="video-js"和data-setup=\'{}\'属性。

注意，两者缺一不可。

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

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

1.2 JS方式

另外一种初始化 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(){
            });
        }
    }
})();

2 播放按钮居中

video.js默认的播放按钮在左上角，应该是 video.js 开发人员认为放中间会遮挡内容，所以没放中间。

不过我们常见的一般都在中间，比较符合习惯。

这是可以通过参数修改的，在<video>标签中加入vjs-big-play-centered类，就可以了。

像这样：

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

3 支持<audio>音乐标签

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

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

4 禁止在iPhone safari中自动全屏

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

<video playsinline ></video>

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

5 暂停时显示播放按钮

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

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

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

其实用CSS就可以搞定了：

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

是不是很轻便很简单 :）

6 播放按钮变○圆形

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的值也要相应改变

7 点击屏幕播放/暂停

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

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

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

8 重载视频文件

总有那么一些情形，我们需要 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();
});

9 进度显示当前播放时间

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

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

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

参考地址：

1. http://codepen.io/davatron5000/pen/LskGD
2. Video.js 4.9 - Now <audio> can join the party!
3. 在网站中嵌入VideoJs视频播放器
4. 如何禁止 iPhone Safari 视频自动全屏？
5. New <video> Policies for iOS
6. Video.js Show play button only when paused
7. Reloading video.js player after changing source using jquery
8. Show the current time of the video, instead of the remaining time on videojs