视频Video放器的部分实例方法

***创建一个视频播放器实例

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() {// getlet howLoudIsIt = myPlayer.volume();// setmyPlayer.volume(0.1);
});

使用播放信息功能play 可用于在具有源的播放器上开始播放。

 myPlayer.ready(function() {myPlayer.play();});

pause 可用于暂停正在播放的播放器的播放。

myPlayer.ready(function() {myPlayer.play();myPlayer.pause();
});

paused 可用于确定播放器当前是否暂停。

myPlayer.ready(function() {// trueconsole.log(myPlayer.paused());// falseconsole.log(!myPlayer.paused());myPlayer.play();// falseconsole.log(myPlayer.paused());// trueconsole.log(!myPlayer.paused());myPlayer.pause();// trueconsole.log(myPlayer.paused());// falseconsole.log(!myPlayer.paused());
});

currentTime 提供当前正在播放的当前时间（以秒为单位）。

myPlayer.ready(function() {// 将当前时间设置为视频中的10秒钟myPlayer.currentTime(10);// 得到当前时间 10let 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)

转载于:https://www.cnblogs.com/wuliujun521/p/11459997.html

视频Video放器的部分实例方法相关推荐

html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
vue引入video视频播放器（视频调用代码范例）
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
android播放器慢速,能慢放视频的手机软件安卓手机视频慢放，把视频速度调整为1/2X...
视频慢放,就是把视频的播放速度调慢.这种效果经常能见到,应该不会陌生.以往调整视频播放速度的操作都是在电脑上完成的,但是给大家安利一个能在手机上面就调整视频播放速度的方法,并且是安卓手机哦.用安卓手机 ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
html5--移动端视频video的android兼容，去除播放控件、全屏等
android下html5的视频播放一直是前端兼容的重灾区,各种体验差,被诟病已久.但之前的故宫穿越H5,和吴亦凡入伍H5,利用的视频技术,貌似又给人一种新面貌. 前段时间做某项目,恰好也是一个类似视 ...
html5声频audio和视频video
html5作为下一代web标准,年前轩起了html5热潮.对于html5我只是本着了解看看.关于html5和RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的, ...
模拟video播放器
更新: 关于第二点,也就是说计算进度条拖放按钮定位的问题. 很感谢 batsing 同学提供了更好的方案: 滑块左偏量 = (进度条长 - 滑块长) * (已播时间/总时长) 尝试过之后发现除了拖曳滑 ...
玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
【Web技术】662- 玩转前端 Video 播放器
Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash.Silverlight 的专利技术在处理这些内容上变 ...
chrome扩展——bilibili视频封面获取器
(2018.7)由于bilibili更改了封面链接的位置,所以下面的代码已经无法使用,新版请见:https://github.com/akimusume/GetBilibiliVideoCover 昨 ...

视频Video放器的部分实例方法

视频Video放器的部分实例方法相关推荐

最新文章

热门文章