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" /><!-- If you'd like to support IE8 (for Video.js versions prior to v7) --><!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head><body><videoid="my-video"class="video-js"controlspreload="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 aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></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>

此时已经成功创建并设置了播放器

手动设置

在现代网络上，<video>当页面完成加载时，元素通常不存在。在这些情况下，自动设置是不可能的，可以通过videojs功能进行手动设置。

videojs(id, options, function onPlayerReady() {})

其中id是播放器的id，options是播放器的配置选项对象，function是播放器就绪后的回调函数

以上面自动配置的内容为例

<!-- template -->
<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

是否在<video>加载元素后立即开始下载视频数据，以下为有效值：

'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("网速异常");
})

web视频播放器videojs相关推荐

web player html5源码,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
php网页播放器源码免费,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由订制跟配置播放器相关参数以达到您要的播放疗效.本文主要介绍Flowpla ...
Flowplayer一款免费的WEB视频播放器
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
Flowplayer基于视频流的免费web视频播放器
前言 Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.支持播放MP4.fl ...
一款免费的WEB视频播放器Flowplayer
原文地址:http://www.cnblogs.com/yuzhongwusan/archive/2012/02/08/2342349.html Flowplayer 是一个开源(GPL 3的)WEB ...
基于Html5的兼容所有主流浏览器的在线视频播放器videoJs
在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...
php视频降清晰度,HTML5视频播放器-video-js（带清晰度切换） | 小灰灰博客
body { background-color: #000; margin-left: 0px; margin-top: 0px; } 视频播放器 var isWap = navigator.user ...
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
一款开源免费跨浏览器的视频播放器--videojs使用介绍
最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...
python开发网页视频播放器_HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法注意:au ...

web视频播放器videojs

VideoJS

下载

Video.js CDN

npm安装

创建播放器

设置

自动设置

手动设置

配置选项

播放器就绪回调

常用方法

监听事件

web视频播放器videojs相关推荐

最新文章

热门文章