zoukankan      html  css  js  c++  java
  • 视频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)
    

      

  • 相关阅读:
    写了10000条Airtest截图脚本总结出来的截图经验,赶紧收藏!
    自动化测试实操案例详解 | iOS应用篇
    Photoshop 2020特别版,内置多款实用插件,功能强大
    vue click.stop阻止点击事件继续传播
    CSS图标与文字对齐的两种方法
    为什么像王者荣耀这样的游戏Server不愿意使用微服务?
    13 张图解 Java 中的内存模型
    记住没:永远不要在 MySQL 中使用 UTF-8
    牛x!一个比传统数据库快 100-1000 倍的数据库!
    为什么我不建议你用去 “ ! = null " 做判空?
  • 原文地址:https://www.cnblogs.com/wuliujun521/p/11459997.html
Copyright © 2011-2022 走看看