vue实现直播视频

Vue 实现直播视频

使用 video.js 和 HLS.js 实现直播流

安装依赖包：

npm install video.js hls.js

在 Vue 组件中引入并初始化：

import videojs from 'video.js'
import Hls from 'hls.js'

export default {
  mounted() {
    this.initVideoPlayer()
  },
  methods: {
    initVideoPlayer() {
      const videoSrc = 'http://example.com/live/stream.m3u8'
      const videoElement = this.$refs.videoPlayer

      if (Hls.isSupported()) {
        const hls = new Hls()
        hls.loadSource(videoSrc)
        hls.attachMedia(videoElement)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          videoElement.play()
        })
      } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        videoElement.src = videoSrc
        videoElement.addEventListener('loadedmetadata', () => {
          videoElement.play()
        })
      }
    }
  }
}

HTML 模板部分：

<video ref="videoPlayer" class="video-js" controls></video>

使用 flv.js 实现 FLV 直播流

安装 flv.js：

npm install flv.js

组件实现代码：

import flvjs from 'flv.js'

export default {
  mounted() {
    this.initFLVPlayer()
  },
  methods: {
    initFLVPlayer() {
      const videoElement = this.$refs.videoPlayer
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/live/stream.flv'
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      flvPlayer.play()
    }
  }
}

使用 WebRTC 实现低延迟直播

安装 peerjs 库：

npm install peerjs

WebRTC 实现示例：

import Peer from 'peerjs'

export default {
  data() {
    return {
      peer: null,
      stream: null
    }
  },
  mounted() {
    this.initWebRTC()
  },
  methods: {
    initWebRTC() {
      this.peer = new Peer()
      const videoElement = this.$refs.videoPlayer

      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
          videoElement.srcObject = stream
          this.stream = stream
        })
    }
  }
}

使用第三方直播 SDK

阿里云直播 SDK 集成示例：

import Aliplayer from 'aliplayer'

export default {
  mounted() {
    new Aliplayer({
      id: 'player-con',
      source: 'your-flash-url',
      width: '100%',
      height: '500px',
      autoplay: true,
      isLive: true
    })
  }
}

直播常见功能实现

聊天室集成：

// 使用Socket.io实现直播聊天
import io from 'socket.io-client'

export default {
  data() {
    return {
      messages: [],
      socket: null
    }
  },
  mounted() {
    this.socket = io('https://your-socket-server.com')
    this.socket.on('chat message', msg => {
      this.messages.push(msg)
    })
  },
  methods: {
    sendMessage() {
      this.socket.emit('chat message', this.newMessage)
      this.newMessage = ''
    }
  }
}

性能优化建议

使用 Intersection Observer 实现懒加载：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src
      observer.unobserve(entry.target)
    }
  })
})

this.$refs.videoElements.forEach(el => {
  observer.observe(el)
})

实现自适应码率切换：

hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
  console.log('Quality changed to:', hls.levels[data.level].height + 'p')
})

注意事项

直播实现需要考虑浏览器兼容性问题，建议提供多种格式的备用流。移动端需要特别注意自动播放策略，iOS 设备通常需要用户交互才能触发视频播放。直播延迟优化可以通过调整 HLS 分片大小或使用低延迟协议如 WebRTC 实现。