video.js中文文档详解

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

1.引入video.js和video-js.css

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

2.初始化

2.1.标签方式

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

<video id="my-player" class="video-js vjs-default-skin" controls preload="none" 
				width="640" height="320" poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

2.2.JS方式

var player = videojs('my-player',{
	autoplay: false,
	controls: true,      
	height: 320, 
	width: 640,
	language: 'zh-CN'
	// 更多配置.....
}, function(){
	videojs.log('播放器已经准备好了!');
	this.on('ended', function() {
		videojs.log('播放结束了!');
	});
});

3.常用配置

3.1.播放按钮居中

videojs默认的播放按钮在左上角,在<video>标签中加入vjs-big-play-centered类:

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

3.2.支持<audio>音乐标签

videojs 4.9开始支持<audio>标签,支持的方式就是,播放的时候封面不会消失。

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

3.3.禁止在iPhone safari中自动全屏

很多人给出的方法是,在<video>标签中加入playsinline参数,如下

<video playsinline ></video>

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

3.4.暂停时显示播放按钮

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

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

3.5.播放按钮变○圆形

videojs默认的播放按钮是圆角矩形,但是一般我们更熟悉圆形的播放按钮。

.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;
}

3.6.中间的播放箭头

.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}

3.7.加载圆圈

.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

3.8.点击屏幕切换播放/暂停

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

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

3.9.重载视频文件

总有那么一些情形,我们需要重新载入视频文件。

$("#reload").click(function() {
    player.pause()
    player.setAttribute('src', '0.mp4');
    player.load();
    player.play();
});

3.10.监听键盘事件

videojs('my-player', {
  userActions: {
	hotkeys: {
	  playPauseKey: function(event) {
		// override play/pause to trigger when pressing the z key
		return (event.which === 90);
	  },
	  muteKey: function(event) {
		// disable mute key
	  },
	  fullscreenKey: function(event) {
		// override fullscreen to trigger when pressing the v key
		return (event.which === 86);
	  }
	}
  }
});

3.11.音量垂直排列

videojs("my-player", 
	{controlBar: 
		{volumePanel: 
			{
				inline: false
			}
		}
	}
);

3.12.显示播放时长/总时长

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

3.13.添加中文支持

videojs.addLanguage('zh-CN', {
  "Play": "播放",
  "Pause": "暂停",
  "Current Time": "当前时间",
  "Duration": "时长",
  "Remaining Time": "剩余时间",
  "Stream Type": "媒体流类型",
  "LIVE": "直播",
  "Loaded": "加载完毕",
  "Progress": "进度",
  "Fullscreen": "全屏",
  "Non-Fullscreen": "退出全屏",
  "Mute": "静音",
  "Unmute": "取消静音",
  "Playback Rate": "播放速度",
  "Subtitles": "字幕",
  "subtitles off": "关闭字幕",
  "Captions": "内嵌字幕",
  "captions off": "关闭内嵌字幕",
  "Chapters": "节目段落",
  "Close Modal Dialog": "关闭弹窗",
  "Descriptions": "描述",
  "descriptions off": "关闭描述",
  "Audio Track": "音轨",
  "You aborted the media playback": "视频播放被终止",
  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。",
  "Play Video": "播放视频",
  "Close": "关闭",
  "Modal Window": "弹窗",
  "This is a modal window": "这是一个弹窗",
  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
  ", opens captions settings dialog": ", 开启标题设置弹窗",
  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
  ", selected": ", 选择",
  "captions settings": "字幕设定",
  "Audio Player": "音频播放器",
  "Video Player": "视频播放器",
  "Replay": "重播",
  "Progress Bar": "进度条",
  "Volume Level": "音量",
  "subtitles settings": "字幕设定",
  "descriptions settings": "描述设定",
  "Text": "文字",
  "White": "白",
  "Black": "黑",
  "Red": "红",
  "Green": "绿",
  "Blue": "蓝",
  "Yellow": "黄",
  "Magenta": "紫红",
  "Cyan": "青",
  "Background": "背景",
  "Window": "视窗",
  "Transparent": "透明",
  "Semi-Transparent": "半透明",
  "Opaque": "不透明",
  "Font Size": "字体尺寸",
  "Text Edge Style": "字体边缘样式",
  "None": "无",
  "Raised": "浮雕",
  "Depressed": "压低",
  "Uniform": "均匀",
  "Dropshadow": "下阴影",
  "Font Family": "字体库",
  "Proportional Sans-Serif": "比例无细体",
  "Monospace Sans-Serif": "单间隔无细体",
  "Proportional Serif": "比例细体",
  "Monospace Serif": "单间隔细体",
  "Casual": "舒适",
  "Script": "手写体",
  "Small Caps": "小型大写字体",
  "Reset": "重置",
  "restore all settings to the default values": "恢复全部设定至预设值",
  "Done": "完成",
  "Caption Settings Dialog": "字幕设定视窗",
  "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
  "End of dialog window.": "结束对话视窗",
  "Seek to live, currently behind live": "试图直播,当前延时播放",
  "Seek to live, currently playing live": "试图直播,当前实时播放",
  "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
  "{1} is loading.": "正在加载 {1}。"
});

4.常用选项

autoplay

类型: boolean

如果true作为属性存在,则在播放器准备就绪时开始播放。

注意:从iOS 10开始,Apple autoplay在Safari中提供支持。有关详细信息,请参阅“新增功能”。

controls

类型: boolean

确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。

width

类型: string|number

设置视频播放器的显示宽度(以像素为单位)。

height

类型: string|number

设置视频播放器的显示高度(以像素为单位)。

loop

类型: boolean

使视频一结束就重新开始。

muted

类型: boolean

默认情况下会静音任何音频。

poster

类型: string

在视频开始播放之前显示的图像的URL。这通常是视频的框架或自定义标题屏幕。一旦用户点击“播放”,图像就会消失。

preload

类型: string

建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值是:

auto立即开始加载视频(如果浏览器支持)。某些移动设备不会预加载视频,以保护用户的带宽/数据使用。

metadata仅加载视频的元数据,其中包括视频的持续时间和尺寸等信息。有时,元数据将通过下载几帧视频来加载。

none不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。

src

类型: string

要嵌入的视频源的源URL。

aspectRatio

类型: string

将播放器置于流体模式,并在计算播放器的动态大小时使用该值。该值应表示比率(例如"16:9"或"4:3")。

autoSetup

类型: boolean

阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。

注意:必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。

children

类型: Array|Object

此选项继承自基Component类。如果Array这是默认值 - 这用于确定哪些子节点(按组件名称)以及在播放器(或其他组件)上创建它们的顺序:

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

该children选项还可以作为传递Object。在这种情况下,它用于提供options任何/所有子类,包括禁用它们false:

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});

fluid

类型: boolean

设置true时Video.js播放器将具有流畅的大小。换句话说,它将扩展以适应其容器。

此外,如果元素具有"vjs-fluid",则此选项自动设置为true。

inactivityTimeout

类型: number

闲置超时,值为0表示没有inactivityTimeout,用户永远不会被视为非活动状态。

language

类型:string,默认值:浏览器默认值或'zh-CN'

与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言,但始终可以更改,支持的语言在lang目录下。

languages

类型: Object

自定义播放器中可用的语言。此对象的键将是语言代码,值将是具有英语键和翻译值的对象。

注:一般情况下,这个选项是不需要的,最好是通过自定义语言videojs.addlanguage()

nativeControlsForTouch

类型: boolean

明确设置关联技术选项的默认值。此选项可以设置true为强制触摸设备的本机控件。

notSupportedMessage

类型: string

允许覆盖Video.js无法播放媒体源时显示的默认消息。

playbackRates

类型: Array

严格大于0的数字数组,其中1表示常速(100%),0.5表示半速(50%),2表示双速(200%)等。如果指定,Video.js显示控件(类vjs-playback-rate)允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

plugins

类型: Object

这支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});

sources

类型: Array

一组对象,它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组。

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

使用元素将具有相同的效果:

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>

techCanOverridePoster

类型: boolean

使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时,这可能很有用,每个技术都必须在播放新源时设置自己的海报。

techOrder

类型:Array,默认值:['html5']

使用播放器的顺序,['html5', 'flash']说明优先使用html5播放器,如果不支持将使用flash

vtt.js

类型: string

允许覆盖vtt.js的默认URL,该URL可以异步加载到polyfill支持WebVTT。

此选项将用于Video.js(即video.novtt.js)的“novtt”版本中。否则,vtt.js与Video.js捆绑在一起。

flash

指定Video.js SWF文件在Flash技术位置的位置:

videojs('my-player', {
  flash: {
    swf: '//path/to/videojs.swf'
  }
});

但是,更改全局默认值通常更合适:

videojs.options.flash.swf = '//path/to/videojs.swf'

nativeAudioTracks

类型: boolean

可以设置为false禁用本机音轨支持。最常用于videojs-contrib-hls。

nativeTextTracks

类型: boolean

可以设置为false强制模拟文本轨道而不是本机支持。该nativeCaptions选项也存在,但只是一个别名nativeTextTracks。

nativeVideoTracks

类型: boolean

可以设置为false禁用本机视频轨道支持。最常用于videojs-contrib-hls。

5.常用方法

play()

播放

pause()

暂停

currentTime()

播放进度

duration()

视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效

buffered()

缓冲/下载

bufferedPercent()

百分比的缓冲

volume()

声音大小(0-1之间)

width()

视频的宽度

height()

获取高度

size(w, h)

设置宽高

enterFullScreen()

全屏

canPlayType(type)

是否能播放资源: 

paused()

是否暂停

startTime()

开始时间

defaultPlaybackRate()

默认播放速度

playbackRate()

当前播放速度,设置后马上改变

ended()

是否结束

autoPlay()

是否自动播放

loop()

是否循环播放

controls()

是否有默认控制条

volume()

音量

muted()

静音

seekable()

返回可以seek的区域 TimeRanges

TimeRanges.length

区域段数

TimeRanges.start(index)

第index段区域的开始位置

TimeRanges.end(index) 

第index段区域的结束位置 

6.常用事件

suspend

延迟下载

loadstart

客户端开始请求数据

progress

客户端正在请求数据

abort

客户端主动终止下载

error

请求数据时遇到错误

stalled

网速失速

play

开始播放

pause

暂停

loadedmetadata

成功获取资源长度

loadeddata

渲染播放画面

waiting

等待数据

playing

开始回放

canplay

可以播放,但中途可能因为加载而暂停

canplaythrough

可以播放,歌曲全部加载完毕

seeking

寻找中

seeked

寻找完毕

timeupdate

播放时间改变

ended

播放结束

ratechange

播放速率改变

durationchange

资源长度改变

volumechange

音量改变

dispose

销毁

打赏

您看完此文章的心情是

  • 0人

  • 鼓掌

    0人

  • 草泥马

    0人

  • 愤怒

    0人

  • 鄙视

    0人

评论

    暂无评论...