js插件---video.js如何使用

一、总结

一句话总结:还是要去官方网站去看英文文档。快点把英语学好啊。

1、如何快速使用这些插件(比如video.js)?

直接百度这些js如何使用就可以了,这样的文档最精简好用

还是得去看官网看api

2、为什么会用到video.js?

浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了。

video.js几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放。

二、一款开源免费跨浏览器的视频播放器--videojs使用介绍

最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了。在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了。首先我们来看看它的优点:

1.它是开源免费的,你可以在github很容易的获取它的最新代码。

2.使用它非常的容易,只要花几秒钟就可以架起一个视频播放页面。

3.它几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放。

4. 界面可以定制,纯javascript和css打造。说明文档也非常的详细。

下面是官网提供的一个简单的使用方法:

<!DOCTYPE HTML>
<html>
<head>
<title>Video.js Test Suite</title>
<link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.10/video.js"></script> </head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264">
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video> 
</body>
</html>

这样个例子对于想用它做一个电影网站来说够用了。可是我们的需求往往不会只是这么简单。比如我现在要强制在pc端使用flash播放要怎么设置?

有两种途径:

先说第一种,通过html的data-setup 属性进行设置。

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{ techOrder: ["flash","html5"]}'>
...
</video>

第二种就是使用javascript:

  videojs('#example_video_1',{
techOrder: ["flash","html5"]
},function() { })

当然,官方的文档说,在内部会自动检测是否支持html5,在不支持的情况下会自动使用flash播放。

随着单页应用的流行,很多时候,我们在初始化videojs的时候,页面上是不存在存放video的节点的。这个时候,videojs也替我们想到了,我们只需要置空data-setup的属性就可以了。然后在js中进行如下申明:

videojs(document.getElementById('example_video_1'), {}, function() {
// This is functionally the same as the previous example.
});

也就是说,第一个位置,我们直接传dom节点的引用也是可以的。

这时候我们发现,播放按钮默认是在左上角,官方说这样可以不会遮挡内容的精彩部分,但是如果我们想要放到中间,处理也很简单。在video标签中增加一个vjs-big-play-centered样式就好了

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
...
</video>

如果我们想要它自动播放,非常容易,加一个autoplay 就可以了,或者data-setup='{"autoplay":true}' ,通过js也是一样的道理。非常简单就不演示了。官方说了,由于html5的标准,不建议写成autoplay="true" 或 controls="true",那是html5之前的版本用的。

默认的控制栏会有许多我用不需要用到的组件,比字幕什么的,为了优化,我们可以定义要显示的组件:

var player = videojs("example_video_1", {
"techOrder": ["flash","html"],
"autoplay":false,
controlBar: {
captionsButton: false,
chaptersButton : false,
liveDisplay:false,
playbackRateMenuButton: false,
subtitlesButton:false
} }, function(){ this.on('loadeddata',function(){
console.log(this)
}) this.on('ended',function(){
this.pause();
this.hide()
}) });

我们优化是针对option,因为有些节点我们不需要创建,默认是创建的,这显然会影响效率,以下是我项目中的一个使用情况:

videojs('example_video_1',{
techOrder : ["html5","flash"],
children : {
bigPlayButton : false,
textTrackDisplay : false,
posterImage: false,
errorDisplay : false,
controlBar : {
captionsButton : false,
chaptersButton: false,
subtitlesButton:false,
liveDisplay:false,
playbackRateMenuButton:false
}
}
},function(){
console.log(this)
});

对照一下dom节点,少了一大堆,感觉启动明显快了许多。看着也清爽了。

打印this看下:

两者是一至的,共有9个对象,于是生成了9个节点,外部只有3个子元素。默认的控制部分会生成14个,外部9个子元素。优化效果非常明显。

初始化的时候,常用的有如下一些参数:

https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

autoplay

自动播放

<video autoplay ...>
or
{ "autoplay": true }

preload

预加载资源

<video preload ...>
or
{ "preload": "auto" }

poster

视频缩略图

<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }

loop

自动循环

<video loop ...>
or
{ "loop": "true" }

width

The width attribute sets the display width of the video.

<video width="640" ...>
or
{ "width": 640 }

height

The height attribute sets the display height of the video.

<video height="480" ...>
or
{ "height": 480 }

Component Options

功能组件(例中演示如何移除静音按钮)

var player = videojs('video-id', {
controlBar: {
muteToggle: false
}
});

videojs 有许多的组件,比如声音,播放按钮,字幕,时间,进度条等等,它们在html中的结构类似于这样子:

Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle

通常html5会比flash加载的更快,所以我们通常优先使用html5,同时把我们要进行的操作写在回调里边。比如:

videojs("example_video_1").ready(function(){
var myPlayer = this; // EXAMPLE: Start playing the video.
myPlayer.play(); });

需要强调的是,如果使用flash优先,那么你在本地调式的时候,要用http的方式访问,否则你什么也看不到。

更多的api调用请看这里https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md

METHODS

autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose //清理
duration
ended //结束
error //错误
exitFullscreen //退出全屏
init
isFullScreen deprecated 废弃
isFullscreen
language
load
loop //循环
muted 静音
pause 暂停
paused //检测是否暂停的状态
play
playbackRate
poster //静态图片
preload
remainingTime //余下时间
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

这里我说一下几个常用的方法:清理 dispose,hide() 隐藏,show() 显示,play()播放,pause(), el()获取video元素 ,暂停 几本上就差不多了。

最后要说一下的就是事件。官方提示的事件如下:

EVENTS

durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

我们常用的有play播放,pause暂停,ended结束,error错误, loadeddata数据加载完成

videojs的插件机制,我以在播放器的控制条中添加一个关闭按钮为例,展示如果使用插件实现我们自己想要的功能。

videojs.PowerOff = videojs.Button.extend({
/* @constructor */
init: function(player, options){ videojs.Button.call(this, player, options);
//onClick为默认事件,不需要人为邦定,否则会调两次
//this.on('click', this.onClick);
}
}); /* This function is called when X button is clicked */
videojs.PowerOff.prototype.onClick = function() {
console.log('ddd')
//这里添加做你想要干的事情
}; /* Create X button */
var createPowerOffButton = function() {
var props = {
className: 'vjs-off-button vjs-control',
innerHTML: '<div class="vjs-control-content">X</div>',
role: 'button',
'aria-live': 'polite',
tabIndex: 0
}; return videojs.Component.prototype.createEl(null, props);
}; /* Add X button to the control bar */
var X;
videojs.plugin('PowerOff', function() {
var options = { 'el' : createPowerOffButton() };
X = new videojs.PowerOff(this, options);
this.controlBar.el().appendChild(X.el());
});

调用的时候,参数要加上插件的名称:

var player = videojs("example_video_1", {
plugins : { PowerOff : {} }
}, function(){ });

看到我们添加的“X” 了没有?什么,你的X是在中间?忘了告诉你,这个地方的样式要自己加上,我的是这样的

.vjs-default-skin .vjs-control.vjs-off-button {
display: block;
font-size: 1.5em;
line-height:;
position: relative;
top:;
float:right;
left: 10px;
height: 100%;
text-align: center;
cursor: pointer;
}

是不是相当的nice呀。

在实践中,我发现flash模式和html5模式还是有一些不一致的地方。

比如在flash模式中,在播放器暂停或隐藏之后,调用paused()方法报错:VIDEOJS: Video.js: paused unavailable on Flash playback technology element.

调用hide()之后,调用show()方法,在flash模式中,会自动调用播放,而且是重新开始,而html5模式则不会。对于这一点,解决的办法是在option中指定autoplay:false,这样两者行为就一致了。

使用videojs我发现有几个地方是要注意的:

1:在iframe加载的页面中,全屏按钮是无效的。当然后来证实不是videojs的问题,是iframe要加allowfullscreen 属性才行。

2:在flash模式下有太多的问题,比哪重复调用pause()会报错,在hide()之后调用paused()会报错。

3:在flash模式下不要试图使用audio去播放音频,虽然有插件可以支持,但是问题很多。html5模式下本人没有测试。

videojs 在flash模式下,以下情况有冲突:
1. video 在播中调用hide()会导致内部错误,如果先调用了pause()和hide(),再调用pause()同样会导致内部错误。类似的情况还有调用dispose()
2. 在video是hide的情况下,去调用paused()会产生内部错误
3. 在hide的状态下,调用show()再调用play会产生内部错误
4. 在文件不存在的情况下,如果不调用dispose会产生内部错误。

综上所述,对于单页应用,videojs在隐藏时,内部的状态就存在丢失的情况,会导致一系列的问题。解决的办法就是播一次就创建一次。关闭就清理。经测试,这种模式就再也不会有错误了

仅管如此,作为一个开源免费的产品,已经是相当不错了。

参考:一款开源免费跨浏览器的视频播放器--videojs使用介绍 - bjtqti - 博客园
http://www.cnblogs.com/afrog/p/4115377.html

三、video.js API 详解

videojs github官网地址
官方文档地址

这里简单的对官方的英文参数列表做了一个简单说明,并写了一Jquery的适配调用

$(document).ready(function () {

        var player = $("video[data-video='example_video_1']").videoJs({
/**
* 自动播放:true/false
* 参数类型:Boolean
**/
autoplay: false, /**
* 是否显示底部控制栏:true/false
* 参数类型:Boolean
**/
controls: true, /**
* 视频播放器显示的宽度
* 参数类型:String|Number
* 例如:200 or "200px"
**/
width: 300, /**
* 视频播放器显示的高度
* 参数类型:String|Number
* 例如:200 or "200px"
**/
height: 300, /**
* 将播放器置于流体模式下,计算播放器动态大小时使用该值。
* 该值应该是比用冒号隔开的两个数字(如“16:9”或“4:3”)。
* 参数类型:String
**/
//aspectRatio:"1:1", /**
* 是否循环播放:true/false
* 参数类型:Boolean
**/
loop: false, /**
* 设置默认播放音频:true/false
* 参数类型:Boolean
**/
muted: false,
/**
* 建议浏览器是否在加载<video>元素时开始下载视频数据。
* 预加载:preload
* 参数类型:String
* 参数值列表:
* auto:立即加载视频(如果浏览器支持它)。一些移动设备将不会预加载视频,以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”,而不是更确凿的东西
* metadata:只加载视频的元数据,其中包括视频的持续时间和尺寸等信息。有时,元数据会通过下载几帧视频来加载。
* none:
*/
preload: "metadata", /**
* 视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
* 参数类型:String
**/
// poster:"", /**
* 要嵌入的视频资源url,The source URL to a video source to embed.。
* 参数类型:String
**/
// src:"", /**
* 此选项从组件基类继承。
* 参数类型:Array|Object
**/
// children:[], /**
* 是否自适应布局
* 播放器将会有流体体积。换句话说,它将缩放以适应容器。
* 如果<video>标签有“vjs-fluid”样式时,这个选项会自动设置为true。
* 参数类型:Boolean
**/
fluid: false, /**
* 闲置超时
* 值为0表示没有
* 参数类型:Number
**/
inactivityTimeout: 0, /**
* 语言
* 参数类型:String
* 支持的语言在lang目录下
*/
language: 'zh-CN', /**
* 语言列表
* 参数类型:Object
* 自定义播放器中可用的语言
* 注:一般情况下,这个选项是不需要的,最好是通过自定义语言videojs。addlanguage().
*/
languages: "", /**
* 是否使用浏览器原生的控件
* 参数类型:Boolean
*/
nativeControlsForTouch: false, /**
* 是否允许重写默认的消息显示出来时,video.js无法播放媒体源
* 参数类型:Boolean
*/
notSupportedMessage: false, /**
* 插件
* 参数类型:Object
*/
plugins: {}, /**
* 资源排序
* 参数类型:Boolean
* 在video.js 6,这个选项将默认为true,
* videojs Flash将被要求使用Flash技术
*/
// sourceOrder:false, /**
* 资源列表
* 参数类型:Array
*/
// sources: [{
// src: '//path/to/video.flv',
// type: 'video/x-flv'
// }, {
// src: '//path/to/video.mp4',
// type: 'video/mp4'
// }, {
// src: '//path/to/video.webm',
// type: 'video/webm'
// }], /**
* 使用播放器的顺序
* 参数类型:Array
* 下面的示例说明优先使用html5播放器,如果不支持将使用flash
*/
//techOrder: ['html5', 'flash'], /**
* 允许重写默认的URL vtt.js,可以异步加载到polyfill支持WebVTT。
* 此选项将在“novtt”建立video.js(即video。novtt js)。否则,vtt.js捆绑video.js。
* 参数类型:String
*/
// "vtt.js":""
}, function () { });
console.log(player);
console.log(player.bigPlayButton.controlTextEl_)
});

入门级别参考,更多支持可以查看官方文档。

 
参考:video.js API 详解 - CSDN博客
https://blog.csdn.net/zh_rey/article/details/78215968

四、video.js简单使用

百度盘下载链接地址:链接:https://pan.baidu.com/s/1k_-ynaWk-XvropYBDp7sUg 密码:ap3p

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video.js</title>
<!-- amazeui的默认引入 -->
<link rel="stylesheet" href="../../../css/amazeui.min.css">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/amazeui.min.js"></script> <!-- 插件对应的js和css -->
<link rel="stylesheet" href="../video.js/amazeui.videojs.css">
<script src="../video.js/video.js"></script> </head>
<body>
<!-- <section class="amp-main">
<div class="am-container">
<h2><a name="%E4%BD%BF%E7%94%A8%E6%BC%94%E7%A4%BA" class="anchor" href="#%E4%BD%BF%E7%94%A8%E6%BC%94%E7%A4%BA"><span class="header-link"></span></a>使用演示</h2><hr>
<div class="doc-example">
<video id="example_video_1" class="video-js vjs-amazeui" controls preload="fdsajkfds" width="640" height="364"
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' />
<track kind="captions" src="video.js/demo.captions.vtt" srclang="en" label="English"></track>
<track kind="subtitles" src="video.js/demo.captions.vtt" srclang="en" label="English"></track>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video> <script>
videojs.options.flash.swf = "video.js/video-js.swf";
</script>
</div> </section> -->
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://yun.it7090.com/video/XHLaunchAd/video01.mp4" type='video/mp4' /> </video> </body> </html>
 

js插件---video.js如何使用的更多相关文章

  1. HTML5视频播放插件Video.js使用详解

    一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...

  2. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

  3. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  4. 记一个视频播放器插件 video.js

    最近在看扣丁学堂上面的一些视频, 突然对他用的视频播放器有点兴趣, 他也是采用的 ts切片播放, 如果使用传统的video标签是无法实现的 他使用的插件叫做 video.js 官网地址 官网提供的播放 ...

  5. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  6. jplayer.js 与 video.js

    HTML5 - 两款基于JS的视频播放器 都是基于h5 video 标签,如果不支持则会自动转成flash,这里个人比较推荐使用jplayer; 1.video.js pc端有时候会与视频打交道,如果 ...

  7. 可操纵网页URL地址的js插件-url.js

    url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符 ...

  8. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  9. 解决IE6下PNG透明的JS插件:DD_belatedPNG.js

    DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...

随机推荐

  1. 点击鼠标右键弹出错误提示:CrashHandler initialization error

    电脑重装系统后,什么都没有了,重装部分必须用的软件后,不管是在桌面还是在文件夹中,当点击鼠标右键时,总是弹出错误,如下图所示: 上网找解决方法,也没有找到,但是看错误,是与SVN有关. 产生原因:To ...

  2. WLAN 感知

    WLAN 感知 通过 Android 8.0 中新增的 WLAN 感知功能,支持设备可以直接使用 WLAN 感知协议发现其他设备.与其他设备进行互连,以及将覆盖范围扩展到其他设备(Android 9 ...

  3. 四、YOLO-V1原理与实现(you only look once)

    可以看成图像分类与定位的结合,给定一张图片,目标检测系统要能够识别出图片的目标并给出其位置,由于图片中目标数是不定的,且要给出目标的精确位置,目标检测相比分类任务更复杂.目标检测的一个实际应用场景就是 ...

  4. mysql 导出到 mongodb 与快速插入测试数据

    快速插入数据: 因为 MongoDB 的底层引擎是 JS 引擎,所以完全可以使用一些 Js 的语法.   for(var i=0;i<10000;i++){    db.ceshi.insert ...

  5. appium使用教程(二)-------------连接手机

    1. 安装驱动 说明:如果驱动装不上,可以使用第三方的工具去安装.(一般来说还是用第三方) 大概就是这个样子索. 2. 开启usb调试 1)开发者选项打开(不知道怎么打开的问度娘) 2)开启USB调试 ...

  6. luogu-1908 逆序对 离散化+树状数组

    题目链接:https://www.luogu.org/problem/show?pid=P1908 题意 简单的求逆序对 思路 用树状数组来做逆序对 对于过大的数字来讲,用离散化处理即可 比赛的时候没 ...

  7. 【Codeforces Round #422 (Div. 2) D】My pretty girl Noora

    [题目链接]:http://codeforces.com/contest/822/problem/D [题意] 有n个人参加选美比赛; 要求把这n个人分成若干个相同大小的组; 每个组内的人数是相同的; ...

  8. impala jdbc4的group by语句的bug,加上limit没错

    这里用的ImpalaJDBC4.jar SELECT field1 alias1 FROM table1 where field1 ='xxxx' group by alias1 这句话impala会 ...

  9. js斐波那契数列求和

    一.递归算法  function recurFib(n) {   if (n < 2) {     return n;   }   else {     return recurFib(n-1) ...

  10. web前端开发——AJAX入门

    什么是AJAX AJAX: A New Approach to Web Applications XML AJAX是老技术新思想. 它所包括的内容我们之前都接触过.例如以下: (1)使用XHTML和C ...