vue 监听TcPlayer腾讯云直播结束方法（使用防抖案例）

最新推荐文章于 2024-07-29 22:00:00 发布

前端技术负责人

最新推荐文章于 2024-07-29 22:00:00 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/107817385

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

1.防抖函数


export const Debounce = (func, wait) => {
    let timer;
    return function() {
      let context = this; // 注意 this 指向
      let args = arguments; // arguments中存着e
         
      if (timer) clearTimeout(timer);
 
      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
    }
}

2.liveStramVideo.vue

data:

options: {
        rtmp: "",
        m3u8: "",
        // m3u8: "http://www.isst.top/live/40.m3u8?txSecret=e3ee333083c40f7236ff472864418635&txTime=5F18EBE4",
        // m3u8:"http://www.isst.top/live/40.m3u8?txSecret=e036a2dcc841dd07f641b4d3622fb066&txTime=5F18072C",
        flv: "", //请替换成实际可用的播放地址
        autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        poster: {
          style: "cover",
          src: "",
          // src:""
        },
        width: "100%",
        height: "100%",
        wording: {},
        controls: "default", //控制器
        h5_flv: true,
        x5_player: true,
        x5_type: "h5",
        x5_fullscreen: true,
        x5_orientation: 1,
        // live:true,
        listener: (msg) => {
          console.log("监听直播", msg.timeStamp);
          if (msg.timeStamp > 20000) {
            this.getEndStatus();
          }
          if (msg.type === "error") {
            this.$router.back();
          }
        },
      },

methods:

getEndStatus: Debounce(function () {
      if (this.routeName === "liveStreaming") {
        console.log("直播结束了");
        this.$router.back();
      }
    }, 5000),