vue实现直播回放功能

使用 video.js 实现直播回放

在 Vue 项目中安装 video.js 和 videojs-contrib-hls

npm install video.js videojs-contrib-hls

创建一个视频播放器组件

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {
          autoplay: true,
          controls: true,
          sources: [{
            src: 'your-stream-url.m3u8',
            type: 'application/x-mpegURL'
          }]
        }
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready')
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

使用 flv.js 实现直播回放

安装 flv.js 依赖

npm install flv.js

创建 FLV 播放器组件

<template>
  <div>
    <video ref="videoElement" controls autoplay muted></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  name: 'FlvPlayer',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      flvPlayer: null
    }
  },
  mounted() {
    if (flvjs.isSupported()) {
      const videoElement = this.$refs.videoElement
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: this.url
      })
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()
    }
  },
  beforeDestroy() {
    if (this.flvPlayer) {
      this.flvPlayer.destroy()
    }
  }
}
</script>

使用阿里云播放器 SDK

在 public/index.html 中引入阿里云播放器 SDK

<script src="https://g.alicdn.com/de/prismplayer/2.9.0/aliplayer-min.js"></script>

创建阿里云播放器组件

<template>
  <div id="player-con"></div>
</template>

<script>
export default {
  name: 'AliPlayer',
  props: {
    source: {
      type: String,
      required: true
    }
  },
  mounted() {
    const player = new Aliplayer({
      id: 'player-con',
      width: '100%',
      height: '500px',
      autoplay: true,
      source: this.source,
      isLive: false // 设置为false表示播放回放
    }, function(player) {
      console.log('播放器创建完成')
    })
  }
}
</script>

实现直播回放列表功能

创建一个回放列表组件

<template>
  <div>
    <ul>
      <li v-for="item in recordings" :key="item.id" @click="playRecording(item.url)">
        {{ item.name }} - {{ item.date }}
      </li>
    </ul>
    <video-player v-if="currentUrl" :options="{sources: [{src: currentUrl, type: 'application/x-mpegURL'}]}"/>
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      recordings: [
        { id: 1, name: '直播回放1', date: '2023-01-01', url: 'recording1.m3u8' },
        { id: 2, name: '直播回放2', date: '2023-01-02', url: 'recording2.m3u8' }
      ],
      currentUrl: ''
    }
  },
  methods: {
    playRecording(url) {
      this.currentUrl = url
    }
  }
}
</script>

使用 WebRTC 实现直播回放

安装 webrtc 适配器

npm install webrtc-adapter

创建 WebRTC 播放器组件

<template>
  <div>
    <video ref="videoElement" autoplay playsinline></video>
  </div>
</template>

<script>
import 'webrtc-adapter'

export default {
  name: 'WebRTCPlayer',
  props: {
    streamUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    const video = this.$refs.videoElement
    const pc = new RTCPeerConnection()

    pc.ontrack = function(event) {
      if (event.track.kind === 'video') {
        video.srcObject = event.streams[0]
      }
    }

    fetch(this.streamUrl)
      .then(response => response.json())
      .then(offer => {
        return pc.setRemoteDescription(offer)
      })
      .then(() => pc.createAnswer())
      .then(answer => pc.setLocalDescription(answer))
      .then(() => {
        // 发送answer到信令服务器
      })
  }
}
</script>

这些方法提供了不同技术栈实现直播回放功能的方案，可以根据项目需求和技术栈选择合适的实现方式。视频源格式可以是 HLS (.m3u8)、FLV、MP4 等常见流媒体格式，具体取决于后端提供的直播回放录制格式。