vue+video.js实现前端视频流（hls、MP4、flv）

最新推荐文章于 2025-06-23 18:15:09 发布

原创最新推荐文章于 2025-06-23 18:15:09 发布 · 1.7w 阅读

83 ·

CC 4.0 BY-SA版权

文章标签：

#vue

js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何利用video.js库来实现前端的HLS、FLV和RTMP等多种视频流直播。首先通过npm安装所需的video.js及相关插件，如videojs-flash、flv.js等。然后在页面中引入video.js及相关样式，并设置视频标签。对于不同类型的直播，可以通过调整techOrder和sources属性来配置。例如，HLS直播设置techOrder为['html5', 'flvjs']，source指向m3u8文件；FLV直播则设置flvjs选项和source指向flv文件。

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

前言

之前、写过关于西瓜播放器xgplayer可以实现各种视频流的前端直播，
目前这篇关于video.js实现直播、视频，拓展下知识面

使用

下载相应插件

npm install video.js --save  
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save
//hls格式  video.js7.0以后版本默认支持hls（m3u8）格式  可以不安装，装了也可以使用
npm install videojs-contrib-hls --save

页面引入

	import Videojs from 'video.js'
   import 'video.js/dist/video-js.css'
   import "videojs-flvjs-es6";
   import "videojs-flash";

使用区别

// 标签容器
<video
   id="mmiid"
    class="video-js vjs-big-play-centered vjs-fluid"
    controls
    preload="auto"
    width="100%"
    height="100%"
    >
</video>

// hls
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{
          autoplay: 'muted',//自动播放
          controls: true,//用户可以与之交互的控件
          loop:true,//视频一结束就重新开始
          muted:false,//默认情况下将使所有音频静音
          aspectRatio:"16:9",//显示比率
          fullscreen:{
              options: {navigationUI: 'hide'}
          },
          techOrder: ["html5", "flvjs"],// 兼容顺序
          html5:{hls: {
              withCredentials: true
          }},
          sources: [{ src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', type: "application/x-mpegURL" }]
      })

//flv
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{
       autoplay: 'muted',//自动播放
        controls: true,//用户可以与之交互的控件
        loop:true,//视频一结束就重新开始
        muted:false,//默认情况下将使所有音频静音
        aspectRatio:"16:9",//显示比率
        fullscreen:{
            options: {navigationUI: 'hide'}
        },
        techOrder: ["html5", "flvjs"],// 兼容顺序
        flvjs: {
            mediaDataSource: {
                isLive: false,
                cors: true,
                withCredentials: false
            }
        },
        sources: [{ src: urlList[0].url, type: "video/x-flv" }]
    })

// 其他
//rtmp
techOrder: ["html5",  "flash"],// 兼容顺序
sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
// mp4
sources: [{ src: this.videoUrl, type: "video/mp4" }]

测试地址

HLS直播源地址：

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

RTMP直播源地址：

香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv
美国1：rtmp://ns8.indexforce.com/home/mystream
美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream

FLV视频：

http://1011.hlsplay.aodianyun.com/demo/game.flv