vue hls.js播放实时流插件封装

最新推荐文章于 2025-04-18 16:12:07 发布

原创最新推荐文章于 2025-04-18 16:12:07 发布

· 662 阅读

2 ·

版权

文章标签：

#javascript #vue.js #前端

在线测试实时流地址：http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8

<template>
  <video ref="videoElement" id="videoElement" controls muted
    style="width: 100%; height: 100%; object-fit: fill"></video>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },

  mounted() {
    if (this.videoUrl) {
      this.show();
    }
  },
  watch: {
    videoUrl: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          console.log(newVal, 111, oldVal);
          this.show(newVal);
        }
      },
      // immediate: true,
    },
  },
  methods: {
    //播放
    show(url) {
      this.video = this.$refs.videoElement; //定义挂载点
      if (Hls.isSupported()) {
        this.hlsjs = new Hls();
        this.hlsjs.loadSource(this.videoUrl); //设置播放路径
        this.hlsjs.attachMedia(this.video); //解析到video标签上

        this.hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log('加载成功');
        });
        this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
          console.log(event, data);
          // 监听出错事件
          console.log('加载失败');
        });
      } else {
        this.$message.error('不支持的格式');

        return;
      }
    },
    //停止播放
    closeVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.video.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
        this.$emit('closeVideo');
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>