Video.js进阶使用(播放器的部分实例方法)
2019-01-06 本文已影响0人
nomooo
-
创建一个视频播放器实例
let myPlayer = this.$video(myVideo, { controls: true, autoplay: 'muted', preload: "auto", });
-
创建实例后,可以通过两种方式全局访问它:
this.$video.players.myVideo; this.$video(myVideo);
-
删除实例:dispose()
从播放器中删除所有事件侦听器。
删除播放器的DOM元素
举个🌰,下面代码设置播放器在播放完成后删除它:
myPlayer.on("ended", function() {
this.dispose();
});
- 改变播放器音量:volume
可以通过volume播放器上的功能更改播放器的音量。音量功能接受0-1的数字。不带参数调用它将返回当前音量
myPlayer.ready(function() {
// get
let howLoudIsIt = myPlayer.volume();
// set
myPlayer.volume(0.1);
});
- 使用播放信息功能
play 可用于在具有源的播放器上开始播放。
myPlayer.ready(function() {
myPlayer.play();
});
pause 可用于暂停正在播放的播放器的播放。
myPlayer.ready(function() {
myPlayer.play();
myPlayer.pause();
});
paused 可用于确定播放器当前是否暂停。
myPlayer.ready(function() {
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused());
myPlayer.play();
// false
console.log(myPlayer.paused());
// true
console.log(!myPlayer.paused());
myPlayer.pause();
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused());
});
currentTime 提供当前正在播放的当前时间(以秒为单位)。
myPlayer.ready(function() {
// 将当前时间设置为视频中的10秒钟
myPlayer.currentTime(10);
// 得到当前时间 10
let whereYouAt = myPlayer.currentTime();
});
duration 提供正在播放的视频的总持续时间
let lengthOfVideo = myPlayer.duration()
bufferedPercent 提供缓冲视频的当前百分比。
let howMuchIsDownloaded = myPlayer.bufferedPercent();
处理播放器上的来源或海报
myPlayer.src({type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"});
-
提供多个版本,以便可以跨浏览器使用HTML5播放,可以使用源对象数组。Video.js将检测支持的版本并加载该文件
myPlayer.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更改设置海报。
// set myPlayer.poster('http://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1503383566,3103179148&fm=26&gp=0.jpg'); // get console.log(myPlayer.poster());
-
获取播放器所有信息
var tech = myPlayer.tech({IWillNotUseThisInPlugins: true}); console.log(tech)