hls.js在vue中的使用

最新推荐文章于 2025-06-23 18:15:09 发布

YOOSHIN

最新推荐文章于 2025-06-23 18:15:09 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue smtp sms typescript impala

本文链接：https://blog.csdn.net/YOOSHIN/article/details/113722641

本文介绍了一个使用HLS.js库实现的小型视频播放组件。该组件通过Vue.js进行开发，能够根据窗口大小调整视频尺寸，并支持暂停和播放功能。此外，文章还涉及了HLS.js的初始化、媒体元素的绑定及事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---cnpm  install hls.js --save



<template>
  <video ref="videoRefsmall" :width="(16/9)*smallVideoHieght" :height="smallVideoHieght" controls></video>
</template>

<script>
  import Hls from 'hls.js';
  import WindowCom from '@/views/home/windows/windowCom'
  import axios from 'axios'
  import OlComminSetting from "@/components/OpenLayersHelper/OlCommonSetting";

  export default {
    name: 'deviceWindow',
    components: {WindowCom},
    data() {
      return {
        hls: null,
      }
    },
    props: {
      contentHeight: Number,
      cameraId: String
    },
    watch: {
    },
    computed: {},
    methods: {
      pauseVideo() {
        this.$refs.videoRefsmall.pause();
      },
      playVideo() {
        this.$refs.videoRefsmall.play();
      },
    },
    created() {

    },
    mounted() {
      this.hls = new Hls();
      this.hls.attachMedia(this.$refs.videoRefsmall);

      this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
        this.$refs.videoRefsmall.pause();
      });
    },
    beforeDestroy() {
      this.hls.stopLoad();
      this.hls.destroy();
    }
  }
</script>