video.js使用技巧


1 初始化

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

1.1 标签方式

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

注意,两者缺一不可。

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

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

1.2 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 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

64条评论

jav_cn says: 回复

给你个赞

daoyu says: 回复

不知道为什么并没有显示大的播放按钮

歪麦 says:

参照第5点,并确保这段css已经起了作用

求ie8 解决方案 says: 回复

ie8 上怎么做啊, 上面是flash 这写控制代码都不能使用啦

歪麦 says:

videojs是支持ie8的,不过要载入ie8的js支持文件,可参考:http://videojs.com/getting-started/

多个video播放问题 says: 回复

您好,请问您下,我是弄成点击DIV1并把这个标签下的以`.html()`的形式传入DIV class="player"里播放,目前只能首次刷新默认传第一个div1里的值播放,点击无法播放,请问该怎么解决呢?先谢谢哈!~

歪麦 says:

估计是JS选择器的原因,JQuery的话,点击事件用on可以解决后期绑定问题。

xiaoz says: 回复

- -,一下发了三个,醉了。 😮

飞翔的前端~ says: 回复

公司正好要做个视频的功能video.js官方文档全英文没看懂~ 看到大神写的东西受益了 解决一些问题 感谢~

mystry says: 回复

大神,我试了重载视频,改source标签的src的那个方法重载,但是重载后视频还是播原来第一个的视频,然后我用F12看了一下元素,发现source的src的确是变了的,也是正确的路径,但是video标签自己多了一个src属性,而且值还是第一个视频的路径,但是我并没有设置video标签的src属性呀~
因为我还要兼容浏览器,所以我有三个source标签,所以不能用直接改video的src标签的方法重载。。。。。
大神求救~!!!

歪麦 says:

那就每个source加个class呀~

AlanWeng says: 回复

如何自定义播放条,还有播放条的开始暂停按钮在pc用手机模式不灵敏怎么解决

歪麦 says:

是可以定制的,videojs官方的文档:http://docs.videojs.com/docs/api/play-progress-bar.html

Ruby says: 回复

你好,如何让播放的时间正向显示从0开始依次增加,而不是从总时间依次减少

zy says: 回复

我使用 vedio.js 播放请求,使用rtmp 流播放 为何开始的时候 加载的窗口那么小,大神求解决

歪麦 says:

使用videojs的初始化方法设置最小尺寸试试。

薛将军 says:

找一个新的Videojs.SWF就行了,详见我的博客http://www.cnblogs.com/xuejiangjun/p/9011951.html

zy says:

非常感谢您的帮助

小二 says: 回复

很详细,感谢分享

谭檀 says: 回复

那个我用的是您的标签方式.那么需要引入js文件吗

歪麦 says:

需要先引入video.js的js文件哦,也就是先安装video.js。

joker says: 回复

请问大神,这个可以把视频清晰度的单词选项取消掉吗,以及视频只显示了总时间玩下减可以加上当前正在播放时间吗???

歪麦 says:

播放时间问题请看新加的第9条技巧,单词选项也同样的原理,用浏览器调试器查看css class,设置成display:none;

逗比不逗比 says: 回复

问一下 ios 手机 刚才是播放的时候 会黑屏一段时间才开始播放 有什么办法可以处理吗

歪麦 says:

会不会是文件太大了?试试小的mp4

逗比不逗比 says:

呃呃呃呃 大文件的话 黑屏很久但是小文件 黑屏很短

逗比不逗比 says:

这个有 没有办法处理呢??

歪麦 says:

不用video.js,直接在Safari或者chrome里面播放呢?或者换一个设备是否一样?

逗比不逗比 says:

电脑上谷歌和火狐都没问题 手机上安卓也没问题 就ios会(微信,UC其他的没试用) 我用6s换其他ios的手机也一样

歪麦 says:

几个步骤来试试:
1、换一个mp4
2、HTML标签是否加上:< !DOCTYPE html>
3、检查看除了mp4文件,是否有其他依赖文件播放后开始加载的。

peterFE says:

请问一下,ios播放视频前加载一会,你是怎么解决的呢?

mc says: 回复

你好,第7点,添加完样式还是不能点击屏幕播放/暂停

歪麦 says:

在浏览器调试器里面查看这个样式是否已经起作用了,有没有被覆盖了。

sanfengzhang says: 回复

你好 在安卓App里面 点击全屏按钮无效 呢

歪麦 says:

估计是被样式挡住了,在Chrome里面调试看

sanfengzhang says:

有没有方法可以改 全屏后的功能 例如 快进快退双击暂停 之类的 模拟腾讯视频的那种功能

歪麦 says:

你可以研究下,哈哈

oxygen says:

你好!请问你问题解决了吗?

宿雾 says: 回复

The media playback was aborted due to a corruption problem or because the media used features your browser did not support.

请问视频播放完毕后报这个错误怎么解决

歪麦 says:

是不是加了多个字幕?

imagecad says: 回复

请问第7条具体怎么实现呢?

这段代码是不是写在video-js.css文件里,在html文件中怎么调用呢?

试了N次了,都不行

歪麦 says:

video-js.css这个文件不要改把,写在自己的css文件就可以了,比video-js.css后加载就可以了

吃猫的小鱼 says: 回复

可以隐藏下载按钮或者禁止下载按钮吗

歪麦 says:

可以自定义工具栏的。

359761411 says: 回复

遇到一个问题,我调用videojs时,如果我的电脑连着互联网,播放是没有问题,但是如果调试的环境无法连接互联网,而且在清了浏览器缓存后,就显示黑屏了,必须要重新连接上互联网调用一次videojs才能播放,有遇到这个问题的吗,有没有解决的办法

歪麦 says:

本地调试吗?是不是引用了外网cdn的静态资源。

易虎 says: 回复

这微信中使用时,能就在局部播放吗?像在浏览器中一样

歪麦 says:

现在你的是什么效果?

易虎 says:

现在微信还是会调出一个单独的页面出来播放,我想做一个像淘宝详情一样的轮播图带播放功能的

谮包子 says: 回复

大佬!怎么我用vue.js用video.js显示 进度显示当前播放时间 怎么做!我不会加呀!大佬!能教教我么!

歪麦 says:

把两者的文档结合起来看

佳佳 says: 回复

点击视频列表切换时,视频地址切换了,但是封面图片一直显示上一次播放的视频截图。请问怎么解决啊,还有在手机上,播放中暂停的话,暂停按钮的样式修改不了,会的大神帮忙看一下啊

不将就,不讲究 says: 回复

大神,怎样默认 底部的播放控制 就是有图片的时候

丸子 says: 回复

怎么 已加载 完页面 自动播放

四月是你的谎言 says: 回复

万分感谢,请问移动端怎么处理进入页面自动播放视频呢

暖爱 says: 回复

大佬,移动端如何禁止拖动滚动条呢,我现在的做法是写一个透明的块盖在底部,但是ios会调用系统的播放,盖不住ios的底部

len says: 回复

本地文件 会无法识别 怎么办

歪麦 says:

搭个web服务器试试

L says: 回复

用普通的video标签和video.js在ios设备上均无法播放是怎么回事,在安卓和pc端没有任何问题。

bonaparte says: 回复

在source里面加了type=rtmp/flv 用以播放rtmp视频流,是不是就不支持用上面的方法进行reload了,找不到元素

xdedm says: 回复

在华为webview中,videojs如果预加载到某个事件点不再加载了,会导致页面触发error事件,华为方面说是videojs没有做好兼容,我想问问这个和我们的videojs有关系吗?

ww1943 says: 回复

你好,我用video.js做的rtmp流播放,如何截图呢,试了各种方法都不行

冰诺y says:

你好,我现在也要做这个功能,找不到解决方法,请问你解决了吗?

whkj says: 回复

您好,怎么让视频在页面的顶端小窗口形式播放。怎么点击最大化按钮自动横屏呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

昵称 *