视频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() {
     // 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)

  

 

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值