说说Vue项目中如何播放视频流

2,034 阅读1分钟

今天聊聊PC端和移动端如何通过Vue实现直播流的播放,话不多说直接上代码!

PC端

  1. 安装播放器相关依赖(版本需要注意下)
  npm install chimee@0.11.0 --save
  npm install chimee-kernel-flv@1.4.10 --save
  1. 定义chimee.js如下,包含配置flv的解析

  2. 在main.js中引入chimee

  3. 在页面中使用(本处的flv格式的视频流由于涉及相关业务就不展示了)

移动端

  1. 下载相关播放器
npm install video.js --save
npm install videojs-contrib-hls --save
  1. 页面使用(此处的m3u8格式的视频流是CCTV3频道) !

注意!不管是rtsp还是rtmp直播流,需服务器协助转化成flv或hls(m3u8)格式后,浏览器才可播放。也可使用node进行转换。