海康摄像头

SuperMario96

已于 2023-11-21 17:06:19 修改

阅读量622

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html css

于 2021-11-23 14:36:17 首次发布

本文链接：https://blog.csdn.net/weixin_44997513/article/details/121492737

这篇博客介绍如何在Vue项目中利用HLS.js库播放HLS格式的视频流。首先引入hls.js库，然后在组件的`mounted`阶段初始化播放器，设置视频源并监听加载事件。当加载成功时开始播放，如果加载失败则显示错误信息。此外，还提供了停止播放的方法。

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

1.npm install hls.js
在这里插入图片描述

<template>
  <div class="playVideo-layout">
    <!-- 播放器 -->
    <div id="app-container" class="video-box">
      <video
        ref="videoElement"
        :src="videoUrl"
        id="videoElement"
        controls
        muted
        style="width: 100%; height: 100%; object-fit: fill"
      ></video>
    </div>
  </div>
</template>
<script>
import hlsjs from 'hls.js'
export default {
  name: 'About',
  components: {},
  data() {
    return {
      videoUrl: 'http://192.168.28.78:83/openUrl/ZIql82I/live.m3u8', //这里书写路径，例
    }
  },
  mounted() {
    this.show()
  },
  methods: {
    //播放
    show() {
      this.video = this.$refs.videoElement //定义挂载点
      console.log(this.video)
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs()
        this.hlsjs.loadSource(this.videoUrl) //设置播放路径
        this.hlsjs.attachMedia(this.video) //解析到video标签上
        console.log(this.hlsjs)
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play()
          console.log('加载成功')
        })
        this.hlsjs.on(hlsjs.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>
.realtimevideo-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  filter: Alpha(Opacity=60);
  opacity: 0.6;
}
</style>