vue & videojs实现rtmp/hls直播流播放

效果图

mp4_hls_rtmp.png

使用技术

1. 使用vue-cli3编写demo
2. videojs7.6视频播放组件
3. videojs-flash实现rtmp流播放
4. video-http-streaming(VHS)实现hls流播放(自videojs7后默认集成，版本7之前都需引入VHS或者videojs-contrib-hls
5. vue-video-player自videojs6.6以后未更新，故抽取代码组件

可用测试源

• HLS直播源地址：

  1. CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
  2. CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
  3. CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8

• RTMP直播源地址：

  1. 香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1
     rtmp://live.hkstv.hk.lxdns.com/live/hks2
  2. 湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv
  3. 美国1：rtmp://ns8.indexforce.com/home/mystream
  4. 美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream
  5. 香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc
  6. 韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

Demo地址