video.js使用技巧

1 初始化

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

1.1 标签方式

一种是在<video>标签里面加上class=video-jsdata-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 支持

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

114条评论

j
jav_cn says: 回复

给你个赞

d
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可以解决后期绑定问题。

x
xiaoz says: 回复

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

飞翔的前端~ says: 回复

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

m
mystry says: 回复

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

歪麦 says: 作者

那就每个source加个class呀~

A
AlanWeng says: 回复

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

歪麦 says: 作者

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

R
Ruby says: 回复

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

z
zy says: 回复

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

歪麦 says: 作者

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

薛将军 says:

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

z
zy says:

非常感谢您的帮助

小二 says: 回复

很详细,感谢分享

谭檀 says: 回复

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

歪麦 says: 作者

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

j
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标签是否加上:
3、检查看除了mp4文件,是否有其他依赖文件播放后开始加载的。

p
peterFE says:

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

m
mc says: 回复

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

歪麦 says: 作者

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

s
sanfengzhang says: 回复

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

歪麦 says: 作者

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

s
sanfengzhang says:

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

歪麦 says: 作者

你可以研究下,哈哈

o
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: 作者

是不是加了多个字幕?

z
zhuyou says:

请问问题解决了没?

i
imagecad says: 回复

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

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

试了N次了,都不行

歪麦 says: 作者

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

马奎 says:

请问实现了么,我这里也不行,放在下面也不行

吃猫的小鱼 says: 回复

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

歪麦 says: 作者

可以自定义工具栏的。

3
359761411 says: 回复

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

歪麦 says: 作者

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

易虎 says: 回复

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

歪麦 says: 作者

现在你的是什么效果?

易虎 says:

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

谮包子 says: 回复

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

歪麦 says: 作者

把两者的文档结合起来看

佳佳 says: 回复

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

不将就,不讲究 says: 回复

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

丸子 says: 回复

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

四月是你的谎言 says: 回复

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

S
System中翱翔 says:

vedio标签上增加autoplay=”none”

S
System中翱翔 says:

说错, autoplay:false是加在JS初始化vedio.js中的参数里

暖爱 says: 回复

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

l
len says: 回复

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

歪麦 says: 作者

搭个web服务器试试

L
L says: 回复

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

b
bonaparte says: 回复

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

x
xdedm says: 回复

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

w
ww1943 says: 回复

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

冰诺y says:

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

怎么解决截图问题 says:

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

w
whkj says: 回复

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

小丶Kiss says: 回复

大佬,使用这个插件 可以实现点击按钮 手机端横屏 全屏播放吗?给个思路~

l
lbr says: 回复

谢谢!太好了

等我胖了再去揍你 says: 回复

求助!为什么我在ios需要点击俩次暂停按钮才能生效!而且在移动端播放的时候点击全屏进去就会退出来 ,暂停的时候点击全屏才有效!头好疼呀

菜鸟 says: 回复

您好,请问做成视频列表页面,类似新闻那样,怎样实例化每个对象呢?在动态加载数据的时候给每个item都加上不一样的id吗?

S
System中翱翔 says:

是的, 每个文件都要有唯一的id, 因为用同一个id的话vedio只被会初始化一次。

海货 says: 回复

我的播放遇到视频很小,黑色空间很大是什么原因?

s
smilebai says: 回复

请教个问题,我这里播放时间一直显示的00:00 想让他实时显示已经播放了多久,该怎么做呢,对了,我获取的是直播流。

w
wanbin says: 回复

您好,请教一下,如何增加一个button呢,现在想加一个功能性的button,而又不想把它做到control bar里,如何去做呢

f
fj says: 回复

audio 标签 怎么初始化,通过jquery

S
System中翱翔 says:

我用的是最新版的vedio.js, MP3的初始化跟MP4一样,同样都是用vedio标签就可以了。

呆呆熊 says: 回复

很详细 谢谢

执太阿 says: 回复

谢谢,很感谢。

s
sunny says: 回复

请教一个问题,为什么在最新版本的谷歌浏览器设置video播放按钮居中class=”video-js vjs-big-play-centered” 无效呢?

S
System中翱翔 says: 回复

请问在苹果手机上,会同时出现苹果自带的control bar和vedio.js的control bar,这个问题要怎么解决呢?
我目前想到的方式就是通过修改vediojs插件的css让vediojs的control bar盖住苹果自带的,但是这属于下下之策,博主又没有更好的解决办法,万分感谢,好人一生平安。

f
fish says: 回复

大神,请问一下app中播放h5 videojs视频,全屏按钮变成灰色,失效是为什么呢?

里李丽 says: 回复

太感谢博主了,对简单做网站来说真的非常详细了

k
kentracy says: 回复

请问大神们,有遇到在谷歌下全屏,关闭后,页面自动回到顶部的问题吗?求帮忙解决

玛丽奥 says: 回复

大佬,video.js中怎么添加视频快进的按钮的效果?用video的属性没有效果

对方 says: 回复

如何设置暂停是的图片

残泪 says: 回复

为什么加了playsinline IOS还是会自动全屏

菜鸡 says: 回复

pc端 为啥谷歌可以全屏 ie跟火狐 全屏键用不了是灰色的没法点 求回复 谢谢大神

乌拉小驴 says: 回复

请问大神嵌入安卓APP内,video不显示在iOS上没问题这是什么原因

j
js小浩 says: 回复

大神,我想问一下videojs中视频如何自动充满父容器呢

C
C says: 回复

可以滴

墨旋 says: 回复

请教一下,为什么要每次刷新页面一遍才会显示出中间大的播放按钮,隐藏下面一条进度条和小的播放按钮及音量按钮,如果不刷新的话就会显示下面一条进度条和小的播放按钮及音量按钮,不会显示出中间大的播放按钮。请问这是啥原因?

j
js小菜 says: 回复

目前为止找到的最全的video.js的中文文档,支持一下!

葵家贝贝 says: 回复

pc端 为啥谷歌可以全屏 ie跟火狐 全屏键用不了是灰色的没法点 求回复 谢谢大神

小白 says:

我的没啥问题,chrome和firefox都可以全屏

w
wwwww says: 回复

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError {code: 4, message: “The media could not be loaded, either because the …rk failed or because the format is not supported.”}

陌上花开 says:

您好!请问问题解决了吗?能否分享一下

T
Talxve says: 回复

ios 在微信 点击暂停 暂停不了啊

g
ge says: 回复

The media playback was aborted due to a corruption problem or because the media used features your browser did not support.
请问视频播放错误时,这个错误信息在页面上不显示怎么办

says: 回复

按钮视频做出来了,但是现在问题,当视频播放完,没有关闭功能,求解决!

志宇 says: 回复

视频 总是 加载报错 No compatible source was found for this media.

陌上花开 says:

您好!请问问题解决了吗?能否分享一下

后来 says: 回复

使用的video.js做视频,现在需要增加一个截屏功能,当video.js实例化后会把原有的dome元素封装成video.js的object,导致调用canvas.getContext(‘2d’).drawImage(video, 0, 0, canvas.width, canvas.height)时拿不到video,请问有大佬知道怎么处理么?

n
now says: 回复

显示时间正序不成功,最后一条似乎没用

c
chen says: 回复

请问一下,videojs播放20路视频,离开里面需要全部销毁,导致路由跳转缓慢,这个该如何解决

9
999 says: 回复

你好,请问加了显示时长的css代码,只显示了”/”,没有显示时间

阿炜 says: 回复

你好 我使用的videojs点击一次暂停之后,再点击播放按钮或者整个播放画面都没反应。请问是什么情况呢?

开发 says:

浏览器不支持flash videojs还能用吗

k
kaif says: 回复

浏览器不支持flash videojs还能用吗

不的枕 says: 回复

在移动端中音量拖动为什么会失效。p c端正常

阿旦 says: 回复

您好 为什么样式会失效呢 用穿透也没用

回复 joker 取消回复

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

昵称 *