• 关于vuevideoplayer 实现跳转到特定位置并自动播放


    //实现跳转到固定位置
    this.player.currentTime(this.videoDetial.duration);
    // 自动播放
    this.player.play();

    无法使用

    默认 playerOptions.autoplay = false; 在点击确认自动播放按钮之后,设置为playerOptions.autoplay = true; 这样会自动播放,但是不会跳转到特定位置,不知道原因,
    于是使用this.player.play() 方法强行执行播放

    完整代码

    <video-player  class="video-player vjs-custom-skin"   
       :playsinline="true" 
       :options="playerOptions"
       @canplay="canplay($event)"
       @play="play($event)"
       @pause="pause($event)"
       @ended="ended"
       @timeupdate="timeupdate($event)"
       @seeking="seeked"
    ></video-player>
    data() {
        return {
          videoDetial: {},
          duration: 0,  // 视频总长
          player:null,
          playerOptions: {
              autoplay: false,  //是否自动播放
              muted: false,   //默认音量为静音
              language: 'zh-CN',
              playbackRates: [0.75, 1.0, 1.25,1.5, 2.0 ], //倍数
              sources: [{  //视频data
                type: "",
                src: "http://xxxx.mp4",
                
              }],
              fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
              aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
              poster: "", //你的封面地址
              notSupportedMessage:"浏览器不支持使用video标签/此视频暂无法播放,请稍后再试",
              controlBar:{
                timeDivider:true,
                durationDisplay:true,
                remainingTimeDisplay:true
              }
            }
        };
      },
      watch: {
        duration(){
        
          this.continuePlay();
        }
      },   
    methods: {
        loop(currentTime){  // 视频轮询以计算播放时间
          var current = currentTime;
          //可以在这里加入请求,时刻向后端请求,通知服务器,目前视频播放的时长,以便下次播放视频,直接跳转
          this.last = current;
        },
         //默认加载之后,就会执行该函数
        canplay(player){
          this.player = player;
          this.duration = player.duration();
        },
        //点击视频播放
        play(player){
          clearInterval(this.timeid);
          this.interval(this.player.duration);
        },
        //点击暂停时触发
        pause(){
          clearInterval(this.timeid);
          this.loop(this.player.duration);
        },
        ended(){
          clearInterval(this.timeid);
        },
        timeupdate(player){   // 元素的currentTime发生变化时触发
          this.curr = player.currentTime;
          // 限制快进
          if(this.curr - this.oldTime > 2) {
            this.player.currentTime(this.oldTime);
          } else {
            this.oldTime = this.curr;
          }
        },
        seeked(){  // 跳跃操作完成时触发
           clearInterval(this.timeid)
        },
        interval(currentTime){
          this.timeid = setInterval(() => {
            this.loop(currentTime);
          }, 10000);
        },
        // 续播
        continuePlay(){
          let lastTime  = 30;
          if(lastTime  >0 ){
            Dialog.confirm({
              title: '提示',
              message: "上次观看到"+ (lastTime  ?`${lastTime  }分`:'') + 0+"秒,是否继续播放?"
            }).then(()=>{
          // 自动跳转到对应的位置并播放  
          this.player.currentTime(this.videoDetial.duration);
    this.player.play();
            }).catch((err)=>{          
                this.player.currentTime(0);
            })
          }
          else{
            this.player.currentTime(0);
          }
        }
      },
      created() {
        this.videoDetial = JSON.parse(sessionStorage.getItem('videoData'));
      },                  
  • 相关阅读:
    视频号视频批量下载
    DAST 黑盒漏洞扫描器 第一篇:流量
    精益六西格玛,研发团队提质增效的管理神器
    如何通过相对规模来估算用户故事?
    SQL SERVER添加表注释、字段注释
    PowerDesigner 将Comment中的字符COPY至Name中
    PowerDesigner设计表时显示注释列Comment和视图显示字段名设置
    unable to resolve dependency tree
    保存formData格式的数据
    vue md5加密和AES加密的简单使用
  • 原文地址:https://www.cnblogs.com/fyjz/p/15523229.html
Copyright © 2020-2023  润新知