video.js视频播放器使用说明
简介
video.js
是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件)。支持在桌面和移动设备上播放视频。这个项目从2010年中期开始,现已经在40多万个网站上使用。
快速开始
感谢Fastly的杰出人士,任何人都可以使用免费的CDN托管版Video.js
。将这些标签添加到您的文档中<head>
1 | <link href="//vjs.zencdn.net/7.2/video-js.min.css" rel="stylesheet"> |
有关要使用的最新版本的
video.js
和URL,请查看我们网站上的入门页面。
在Video.js
的旧版本(6及更早版本)中,在vjs.zencdn.net
CDN托管版本中,我们包含一个剥离的Google Analytics像素,该像素跟踪从CDN加载的播放器的随机采样(当前为1%)。这使得我们可以看到(粗略地)浏览器在野外的使用,以及其他有用的指标,如OS和设备。如果你想禁用Analytics
,你可以简单地包括下面的全局,然后通过免费的CDN包括VIDEO.JS
:
1 | <script>window.HELP_IMPROVE_VIDEOJS = false;</script> |
或者,可以通过从npm获取Video.js
、从GitHub发行版下载或通过unpkg或其他JavaScript CDN(如CDN js)包含Video.js
。这些版本根本不包括谷歌分析跟踪。
1 | <!-- unpkg : use the latest version of Video.js --> |
接下来,使用Video.js
和创建一个<video>
元素一样简单,但是还有一个附加的data-setup
属性。至少,这个属性的值必须为'{}'
,但是它可以包括任何Video.js options——只要确保它包含有效的JSON!
1 | <video |
当页面加载时,视频.js会找到这个元素并自动设置一个播放器。
如果不想使用自动设置,则可以停止data-setup
属性,并使用videojs
函数手动初始化videojs
元素:
1 | var player = videojs('my-player'); |
videojs
函数还接受一个options
对象和一个在玩家准备就绪时调用的回调函数:
1 | var options = {}; |
如果你已经准备好潜水了,入门页面和文档是获取更多信息的最佳场所。如果你被卡住了,去我们的(松弛通道)[http://slack.videojs.com/] !
设置语言
videojs的有多个翻译在lang目录下,设置支持中文,引入lang/zh-CN.js
文件。
1 | <script src="http://vjs.zencdn.net/7.2/lang/zh-CN.js"></script> |
播放按钮居中
video.js
默认的播放按钮在左上角,应该是video.js
开发人员认为放中间会遮挡内容,所以没放中间。
不过我们常见的一般都在中间,比较符合习惯。
这是可以通过参数修改的,在<video>
标签中加入vjs-big-play-centered
类,就可以了。
像这样:
1 | class="video-js vjs-default-skin vjs-big-play-centered" |
暂停时显示播放按钮
video.js
在未播放时,会显示一个大的播放按钮,上面我们提到如何让他居中。
那么,如何在视频暂停时也显示这个播放按钮呢?
有很多用JS的解决办法,感觉都挺麻烦的。
其实用CSS就可以搞定了:
1 | .vjs-paused .vjs-big-play-button, |
播放按钮变○圆形
video.js
默认的播放按钮是圆角矩形,
我们一般更熟悉播放按钮为圆形的:
那么怎么改呢?还是用CSS来解决。
1 | .video-js .vjs-big-play-button{ |
进度显示当前播放时间
video.js
默认倒序显示时间,也就是视频播放的剩余时间。
要显示当前的播放时间,以及总共视频时长,加2行CSS解决:
1 | .video-js .vjs-time-control{display:block;} |
重载视频文件
总有那么一些情形,我们需要重新载入视频文件。
比如,马上播放刚上传的文件。
例如这样的标签:
1 | <video id="example_video"> |
在video.js
中,用现成的js方法就可以实现:
1 | var video = document.getElementById('example_video'); |
或者:
1 | var video = document.getElementById('example_video'); |
禁止在iPhone safari中自动全屏
方法如下,在<video>
标签中加入playsinline
参数,
1 | <video playsinline ></video> |
注意,在iOS10之前用的是webkit-playsinline
。
参考地址: