web视频播放器videojs
VideoJS
- 下载
-
- Video.js CDN
- npm安装
- 创建播放器
- 设置
-
- 自动设置
- 手动设置
- 配置选项
- 播放器就绪回调
- 常用方法
- 监听事件
Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。当前版本
7.15.0， 点击前往官方文档。
下载
Video.js CDN
引入video.js和video-js.css，下例为官方示例：
<head>
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 videoa
>
p>
video>
<script src="https://vjs.zencdn.net/7.14.3/video.min.js">script>
body>
npm安装
npm install --save-dev video.js
在vue页面引入js和css
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
创建播放器
<video class="video-js">
<source src="https://v-cdn.zjol.com.cn/280443.mp4" type="video/mp4">
video>
设置
自动设置
默认情况下，当您的网页完成加载时，Video.js 将扫描具有该data-setup属性的媒体元素。该data-setup属性用于将选项传递给 Video.js
<video class="video-js" data-setup='{"controls": true, "autoplay": false, "preload": "auto", "width": "800px"}'>
<source src="https://v-cdn.zjol.com.cn/280443.mp4" type="video/mp4">
video>
此时已经成功创建并设置了播放器
手动设置
在现代网络上，
videojs(id, options, function onPlayerReady() {})
其中id是播放器的id，options是播放器的配置选项对象，function是播放器就绪后的回调函数
以上面自动配置的内容为例
<video id="video" class="video-js">video>
// script
videojs(
'video',
{
sources: [{
src: 'https://v-cdn.zjol.com.cn/280443.mp4',
type: 'video/mp4'
}],
controls: true,
autoplay: false,
preload: 'auto',
width: '800px'
}
)
注意：不要同时使用
data-setup属性和选项对象
配置选项
videojs(
'video',
{
sources: [{
src: 'https://v-cdn.zjol.com.cn/280443.mp4',
type: 'video/mp4'
}, {
src: 'https://v2.szjal.cn/20190408/0YnHrnOM/index.m3u8',
type: 'application/x-mpegURL'
}],
autoplay: 'muted',
controls: true,
width: 600,
height: 400,
loop: true,
muted: true,
poster: 'https://bpic.588ku.com/back_list_pic/21/07/09/a5a928351f9b645e95414663d7ec376f.jpg!/fw/630/quality/90/unsharp/true/compress/true',
preload: 'auto'
}
)
以下为常用配置选项：
autoplay
类型：
boolean|string注意1：此时，自动播放属性和选项不能保证您的视频会自动播放。注意2：如果媒体元素上有一个属性，该选项将被忽略。注意3：不能在属性中传递字符串值，必须在 videojs 选项中传递
建议向videojs传递配置选项，以下为有效值：
- 布尔值
false：与在视频元素上没有属性相同，不会自动播放 - 布尔值
true：与在视频元素上具有属性相同，将使用浏览器自动播放 - 字符串
'muted'：将使视频元素静音，然后在加载启动时手动调用play()。这很可能奏效。 - 字符串
'play'：将在加载启动时调用play()，类似于浏览器的自动播放 - 字符串
'any'：将在加载启动时调用play()，如果promise被拒绝，它将使视频元素静音，然后调用play()
通常情况下使用 'muted' ，它可以静音自动播放。
controls
类型：
boolean
确定播放器是否具有用户可以与之交互的控件。如果没有控件，启动视频播放的唯一方法是使用autoplay属性或通过播放器 API
width
类型：
string|number
设置视频播放器的显示宽度（以像素为单位）
height
类型：
string|number
设置视频播放器的显示高度（以像素为单位）
loop
类型：
boolean
使视频一结束就重新开始
muted
类型：
boolean
默认情况下将静音任何音频
poster
类型：
string
在视频开始播放之前显示的图像的 URL。这通常是视频的一帧或自定义标题屏幕。一旦用户点击“播放”，图像就会消失。
preload
类型：
string
是否在
'auto'：立即开始加载视频（如果浏览器支持），一些移动设备不会预加载视频以保护其用户的带宽/数据使用'metadata'：仅加载视频的元数据，其中包括视频的时长和尺寸等信息'none'：不要预加载任何数据，浏览器将等到用户点击“播放”开始下载
推荐使用'auto'，因为它允许浏览器选择最佳行为
src
类型：
string
要嵌入的视频源的源 URL
注意：当提供字符串作为源时，Video.js 将尝试从文件扩展名推断视频类型，但此推断不适用于所有情况，例如m3u8格式文件。建议使用
source选项。
source
类型：
Array
一个对象数组，它反映了本机元素拥有一系列子元素的能力。这应该是具有src和type属性的对象数组，例如：
videojs('video', {
sources: [{
src: 'https://v-cdn.zjol.com.cn/280443.mp4',
type: 'video/mp4'
}, {
src: 'https://v2.szjal.cn/20190408/0YnHrnOM/index.m3u8',
type: 'application/x-mpegURL'
}]
});
播放器就绪回调
因为Video.js的技术有可能被异步加载，所以在设置后立即与播放器交互并不总是安全的。出于这个原因，Video.js播放器有一个“就绪”的概念，任何以前使用过jQuery的人都会熟悉这个概念。有三种方法可以传递这些回调：
将回调作为第三个参数传递给Videojs()函数：
videojs('video', null, function onPlayerReady() {
console.log(this)
});
将回调传递给播放器的ready()方法：
var player = videojs('video');
player.ready(function() {
console.log(this)
});
监听播放器的"ready"事件：
var player = videojs('my-player');
player.on('ready', function() {
console.log(this)
});
常用方法
var player = videojs('video');
// 通过API将源传递给播放器
player.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
player.src([
{type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'},
{type: 'video/webm', src: 'http://www.example.com/path/to/video.webm'},
{type: 'video/ogg', src: 'http://www.example.com/path/to/video.ogv'}
]);
// 通过API更改或设置海报
// 设置海报
player.poster('http://example.com/myImage.jpg');
// 获取海报
console.log(myPlayer.poster());
// 播放器开始播放
player.play();
// 播放器暂停播放
player.pause();
// 获取播放器当前是否已暂停
console.log(player.paused());
// 设置正在播放的当前时间（以秒为单位）
player.currentTime(120);
// 获取当前时间
console.log(player.currentTime());
// 获取正在播放的视频的总持续时间
console.log(player.duration())
// 获取视频中剩余的秒数
console.log(player.remainingTime());
// 获取缓冲视频的当前百分比
console.log(player.bufferedPercent());
// 检查播放器当前是否全屏
console.log(player.isFullscreen());
监听事件
var player = videojs('video');
player.on("loadstart",function(){
console.log("开始请求数据 ");
})
player.on("progress",function(){
console.log("正在请求数据 ");
})
player.on("loadedmetadata",function(){
console.log("获取资源长度完成 ")
})
player.on("canplaythrough",function(){
console.log("视频源数据加载完成")
})
player.on("waiting", function(){
console.log("等待数据")
});
player.on("play", function(){
console.log("视频开始播放")
});
player.on("playing", function(){
console.log("视频播放中")
});
player.on("pause", function(){
console.log("视频暂停播放")
});
player.on("ended", function(){
console.log("视频播放结束");
});
player.on("error", function(){
console.log("加载错误")
});
player.on("seeking",function(){
console.log("视频跳转中");
})
player.on("seeked",function(){
console.log("视频跳转结束");
})
player.on("ratechange", function(){
console.log("播放速率改变")
});
player.on("timeupdate",function(){
console.log("播放时长改变");
})
player.on("volumechange",function(){
console.log("音量改变");
})
player.on("stalled",function(){
console.log("网速异常");
})