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)
    

      

  • 相关阅读:
    前后端分离,如何防止接口被其他人调用或恶意重发
    Session,Token相关区别
    【Spring事务的事务属性】
    【Java基础】一些问题
    【Java基础】重写equals需要重写hashcode
    【算法】哈希算法
    MySQL事务隔离级别
    @InitBinder装配自定义编辑器
    自定义转换器
    数据绑定流程
  • 原文地址:https://www.cnblogs.com/wuliujun521/p/11459997.html
Copyright © 2011-2022 走看看