前端实现视频流播放：封装一个可复用的HlsPlayer组件

简介

在前端开发中，播放视频流是一个常见的需求，尤其是在需要实时监控或直播的场景中。本文将分享如何封装一个基于hls.js库的Vue组件，以便在任何需要的地方快速引用和播放视频流。

环境准备

首先，确保你的项目中已经安装了Vue框架和hls.js库。如果没有安装hls.js，可以通过npm进行安装：

npm install hls.js

组件封装

接下来，我们将创建一个名为HlsPlayer.vue的Vue组件，用于播放HLS视频流。

在HlsPlayer.vue的模板中，我们定义了一个video元素，它将用于播放视频流。在脚本部分，我们首先导入Hls类，然后定义组件的属性、数据、生命周期钩子和方法。在样式部分定义一些基本样式，确保视频播放器能够适应不同的屏幕尺寸。

<template>
  <div class="myVideo">
    <video class="myVideo" ref="vedioEle" controls muted width="600"></video>
    <!-- <button @click="() => {this.video?.play()}">Play</button> -->
  </div>
</template>

<script>
// 安装依赖: npm install hls.js
import Hls from 'hls.js'
export default {
    props:{
        url:{
          type: String,
          default:'',
        }
    },
  data() {
    return {
      hls:null, // hls实例
      video: null,
      timer:null
    }
  },
  created() {},
  watch: {
    url: {
      immediate: false,
      handler(newVal) {
        if (newVal) {
          this.initializePlayer();
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initializePlayer()
    })
  },
  beforeUnmount() {},

  methods: {
    initializePlayer() {
      this.video = this.$refs.vedioEle;
      if (!this.url) {
        // 如果url为空，显示加载提示
        this.showLoadingIndicator();
        return;
      }
      this.hlsPlay();
    },
    showLoadingIndicator() {
      // 显示加载提示的逻辑
      // 这里可以是修改DOM，或者显示一个加载动画等
      console.log('正在加载视频...');
      // 您可能需要添加一些逻辑来定时检查url是否已经赋值
      // 如果赋值了，就调用this.hlsPlay()来开始播放
    },
    hlsPlay() {
      this.video = this.$refs.vedioEle
      if (Hls.isSupported()) {
        //如果支持hLs.js (MediaSource Extensions)
        this.hls = new Hls()
        this.hls.loadSource(this.url)
        this.hls.attachMedia(this.video)
        this.hls.on(Hls.Events.BUFFERING, (event, data) => {
          console.log('缓冲中...');
        });
        this.hls.on(Hls.Events.MANIFEST_LOADED, (event, data) => {
          console.log('播放列表已更新，尝试恢复播放');
          if (!this.video.paused) {
            this.video.play();
          }
        });
        //自动播放
        this.hls.on(Hls.Events.MANIFEST_PARSED,  (event, data) =>  {
          this.timer = setTimeout(() => {
            this.video.play()
          },500);
        })
      } else if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
        //如果支持原生播放
        this.video.src = this.url
        //自动播放
        this.video.addEventListener('canplay', () => {
          this.timer = setTimeout(() => {
            this.video.play()
          },500);
        });
      }
    }
  },
  beforeDestroy() {
    if (this.hls) {
      this.hls.destroy();
    }
    clearTimeout(this.timer);
  }
}
</script>

<style>
.myVideo {
  width: 100%;
  height: 100%;
  
}
</style>

使用组件

一旦HlsPlayer.vue组件被创建，你可以在任何Vue组件中通过以下方式使用它

<div class="imgBox" >
	 <HlsPlayer :url="state.hlsplayUrl" v-if="state.hlsplayUrl"></HlsPlayer>
</div>
import HlsPlayer from '@/views/securityPatrol/components/HlsPlay.vue';

const state = reactive({
    // 使用网上可播放使用的地址
	hlsplayUrl:'https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8'
});

防抖优化

在前端开发中，实现视频流播放时，用户频繁点击按钮可能会导致服务器多次请求视频流地址，增加服务器负担并可能引起播放失败。为解决此问题，我们可以使用防抖技术优化按钮点击事件处理。防抖技术确保在指定时间间隔内，无论事件触发多少次，只有一次函数调用被执行。以下是实现步骤：

1. 包装请求逻辑：使用debounce函数包装请求视频流的逻辑，设置1000毫秒的防抖时间。
2. 实现防抖函数：创建debounce函数，通过setTimeout和clearTimeout控制函数执行时机。
3. 处理点击事件：在点击事件处理函数中使用防抖函数，避免频繁请求。

// 包装请求视频流的逻辑
const debouncedRequestStream = debounce(() => {
  killProcess().then(res => {
    if (res.data.code == 200) {
      const cameraIp = 1; // 这里应该是动态获取的IP地址
      putStream({ cameraIp:cameraIp }).then(res => {
        state.hlsplayUrl = res.data;
      });
    }
  });
}, 1000); // 1000毫秒防抖时间

// 防抖函数
function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 点击事件
const handleItemClick = (row, index, i) => {
  state.hlsplayUrl = ''
  // 使用防抖函数处理视频流请求
  debouncedRequestStream();
};

效果展示

结语

通过封装HlsPlayer组件，我们能够轻松地在项目中实现视频流的播放功能。这种封装方式不仅提高了代码的复用性，还使得维护变得更加简单。希望这篇文章能够帮助你在前端项目中实现视频流播放的需求。