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" }]

一些补充说明

1.对于Video.js 5.x及更低版本，Flash技术是Video.js核心存储库的一部分。对于Video.js 6.x及更高版本，Flash技术位于单独的存储库中。videojs-flash.js插件只与Video.js> = 6.0.0一起使用，因为之前的flash技术已构建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 这个插件。

2.对于播放HLS视频，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默认捆绑VHS（VHS是videojs-contrib-hls的继承者。它是一个源自videojs-contrib-hls存储库的源处理程序。虽然videojs-contrib-hls最初设计用于在所有浏览器上添加HLS播放，但我们意识到引擎也可以播放其他格式，所以videojs-contrib-hls这个项目已经被弃用，被videojs-http-streaming继承）。默认情况下，在Video.js 7及以上版本中已经集成Videojs HTTP Streaming（昵称为VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未来的HTTP流媒体协议视频。

注意：

1.对于Video.js 7之前的版本（明确说是6版本的），必须使用videojs-http-streaming.js插件才可以播放HLS，DASH和未来的HTTP流媒体协议视频，即使它们不是本机支持的。

2.VHS支持HLS和DASH和未来的HTTP流媒体协议。

• 介绍 https://www.cnblogs.com/stoneniqiu/p/5807568.html

插件内部可以直接调用播放器的api。 有一款playlist的插件可以研究下，如过你需要播放列表。https://github.com/brightcove/videojs-playlist 以及 http://videojs.com/advanced/ 有这样的效果：

rtmp

html5环境不支持rtmp； rtmp需要flash环境；

首先，rtsp不能使用于网页环境（包含PC端和移动端）。 那么直播只能选择rtmp或http

rtmp协议只支持flashplayer，也就是只能在PC端（或安卓环境中安装了flashplayer组件，这种环境比较少）安装了flashplayer的情况下使用。按现在的趋势，flashplayer是要逐渐被淘汰掉的。当然，在中国还会存在相对长时间。

http协议的直播分两种格式，m3u8和flv。flv是一种即将被淘汰的直播格式。用来做直播已显的力不从心了。所以综合考虑，m3u8相对的比较好点，优点是支持移动端， 并且支持PC端上安装了flashplayer的环境。缺点就如同rtmp一样。flashplayer并不是未来的发展趋势。

另外一个缺点就是m3u8是有延迟的。并不能实时，实时传输方面不如rtmp协议。因为m3u8的直播原理是将直播源不停的压缩成指定时长的ts文件（比如9秒，10秒一个ts文件） 并同时实时更新m3u8文件里的列表以达到直播的效果。这样就会有一个至少9,10秒的时间延迟。如果压缩的过小，可能导致客户端网络原因致视频变卡。

最近要做摄像头视频的展示，不想使用硬件方的专用插件，所以计划视频推送到SRS服务器，浏览器再通过rtmp协议显示，类似于直播。

经查询，了解到可以用ckplayer(有许可条款)和video.js在html页面中。尝试了video.js_5.x可以正常播放，而6.x版本不能播放，可目前video.js已经更新到了7.x！

几经折腾，发现6.x版本后需要单独的flash插件，早期版本包含了flash，官方说明如下：

websocket

<template>
  <div class="test">
 
  </div>
</template>
 
<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>

videojs的一些监听事件汇总

options

常见options成员（写在option这个对象中） autoplay : true/false 播放器准备好之后，是否自动播放，默认false

controls : true/false 是否拥有控制条 ，默认true 如果设为false ,界面上不会出现任何控制按钮，那么只能通过api进行控制了

height: 字符串或数字（字符串带单位） 视频容器的高度，比如： height:300 or height:‘300px’

width: 字符串或数字 视频容器的宽度, 单位像素

loop : true/false 视频播放结束后，是否循环播放

muted : true/false 是否静音

poster: 通常传入一个URL 播放前显示的视频画面，播放开始之后自动移除。

preload: ‘auto’/ ‘metadata’ / ‘none’ 预加载

auto-自动 metadata-元数据信息 ，比如视频长度，尺寸等 none-不预加载任何数据，直到用户开始播放才开始下载

children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件 数组中的顺序将影响组件的创建顺序 整后会生成的dom少一些，加载也快一些 播放器在html中的常见的组件元素 children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件 数组中的顺序将影响组件的创建顺序 整后会生成的dom少一些，加载也快一些 播放器在html中的常见的组件元素

sources:Array
sources: [{ src: ‘…mp4’, type: ‘video/mp4’}, { src: ‘…webm’, type: ‘video/webm’}]

资源文件 等价于html中的

techOrder: [‘html5’] 默认为[‘html5’]，'flash’可以有，比如 [‘html5’, ‘flash’] 在v6.0.0 及以上的版本中，默认不包含flash的使用代码。如果要使用flash播放的，需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。 plugins:自动初始化要加载的插件

var options = {};
 
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
  videojs.log(‘播放器已经准备好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件监听？
  this.on(‘ended‘, function() {
    videojs.log(‘播放结束了!‘);
  });
});



var playerVideo = videojs("my-player", options, function onPlayerReady() {
    videojs.log('Your player is ready!');
    
    this.on("loadstart",function(){
        console.log("开始请求数据 ");
    })
    this.on("progress",function(){
        console.log("正在请求数据 ");
    })
    this.on("loadedmetadata",function(){
        console.log("获取资源长度完成 ")
    })
    this.on("canplaythrough",function(){
		console.log("视频源数据加载完成")
    })
    this.on("waiting", function(){
        console.log("等待数据")
    });
    this.on("play", function(){
		console.log("视频开始播放")
    });
    this.on("playing", function(){
        console.log("视频播放中")
    });
    this.on("pause", function(){
        console.log("视频暂停播放")
    });
    this.on("ended", function(){
        console.log("视频播放结束");
    });
    this.on("error", function(){
        console.log("加载错误")
    });
    this.on("seeking",function(){
        console.log("视频跳转中");
    })
    this.on("seeked",function(){
        console.log("视频跳转结束");
    })
	this.on("ratechange", function(){
        console.log("播放速率改变")
    });
    this.on("timeupdate",function(){
        console.log("播放时长改变");
    })
    this.on("volumechange",function(){
        console.log("音量改变");
    })
    this.on("stalled",function(){
        console.log("网速异常");
    })
   
    
});

// 1.6 手动控制播放条的显示和隐藏
video.on(‘tap’, function(){
if (player.userActive() === true) {
player.userActive(false);
} else {
player.userActive(true);
}
}); 

video 属性与方法

//错误状态  
   Media.error; //null:正常  
   Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
  
//网络状态  
   Media.currentSrc; //返回当前资源的URL  
   Media.src = value; //返回或设置当前资源的URL  
   Media.canPlayType(type); //是否能播放某种格式的资源  
   Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
   Media.load(); //重新加载src指定的资源  
   Media.buffered; //返回已缓冲区域，TimeRanges  
   Media.preload; //none:不预载 metadata:预载资源信息 auto:  
  
//准备状态  
   Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
   Media.seeking; //是否正在seeking  
  
//回放状态  
   Media.currentTime = value; //当前播放的位置，赋值可改变位置  
   Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  
   Media.duration; //当前资源长度 流返回无限  
   Media.paused; //是否暂停  
   Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  
   Media.playbackRate = value;//当前播放速度，设置后马上改变  
   Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  
   Media.seekable; //返回可以seek的区域 TimeRanges  
   Media.ended; //是否结束  
Media.autoPlay; //是否自动播放  
Media.loop; //是否循环播放  
   Media.play();    //播放  
   Media.pause();   //暂停  
  
//控制  
Media.controls;//是否有默认控制条  
   Media.volume = value; //音量  
   Media.muted = value; //静音  
  
   //TimeRanges(区域)对象  
TimeRanges.length; //区域段数  
TimeRanges.start(index) //第index段区域的开始位置  
TimeRanges.end(index) //第index段区域的结束位置

修改H5 中video默认 的样式

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
   display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
  //display: none;
}
//进度条
video::-webkit-media-controls-timeline {
   //display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
   display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
   display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
   //display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  // display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
  // display: none;
}
//所有控件
video::-webkit-media-controls-enclosure{
  // display: none;
}
video::-webkit-media-controls-overlay-enclosure{
  display: none;
}
video::-internal-media-controls-loading-panel{
  display: none;opacity: 0;visibility: hidden;width: 0px;height: 0px;
  border: 2px crimson solid;
}

video js

npm install --save video.js
npm install --save videojs-contrib-hls

引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/video-js.css'

需要播放视频的页面引入js对象

import videojs from "video.js"; import "videojs-contrib-hls";

import videojs from 'video.js';
import 'videojs-contrib-hls';
import 'video.js/dist/video-js.css';
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';

videojs.addLanguage('zh-CN',VideojsZhcnLanguage);

const myPlayer = ref<any>(null);
const mountedFlag = ref<boolean>(false);
// 初始化视频组件
const initVideo = (url:string) => {
  if (myPlayer.value) {
    myPlayer.value.pause();
    myPlayer.value.dispose();
  }
  // 向Dom中写入视频组件
  document.getElementById('video-box').innerHTML = '';
  const html = `<video id="fire-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" style="width: 100%;height:100%">
        <source id="source" src="${url}" type="application/x-mpegURL">
    </video>`;

  document.getElementById('video-box').innerHTML = html;
  // 初始化声明
  myPlayer.value = videojs('fire-video',{
    language: 'zh-CN',
    autoplay: 'muted',
    bigPlayButton: false,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true,
  });
  videojs.hook('beforeerror', (player, err) => {
    // Video.js 在切换/指定 source 后立即会触发一个 err=null 的错误，这里过滤一下
    if (err !== null) {
      myPlayer.value.src(url);
    }

    // 清除错误，避免 error 事件在控制台抛出错误
    return null;
  });

  myPlayer.value.play();
};

// 监听，需要视频url由其他方法赋值且组件挂载完成后，才能进行初始化
watch([cameraURL,mountedFlag,], ([url,flag,]): void => {
  if (url && flag) {
    initVideo(url);
  }
});

onMounted(() => {
  setTimeout(() => {
    mountedFlag.value = true;
  }, 500);
});
// 组件销毁
onUnmounted(() => {
  if (myPlayer.value) {
    mountedFlag.value = false;
  }
}); 

操作 上面通过videojs创建了一个Player对像，我们就可以通过这个对象的各种函数来操作播放器。 同样这里只说说常用的函数，其他的大家参考官网docs.videojs.com/player

src(string | SourceObject | SourceObject[])：设置视频源 src():string：获取当前视频源 play()：播放 pause()：暂停 paused():boolean：是否暂停 currentTime(number)：设置播放位置，就是seek currentTime():number：获取当前播放位置 muted():boolean：是否静音 muted(boolean)：设置静音 duration():number：获取时长 controls(boolean)：设置控制栏显示隐藏 controls():boolean：控制栏是否显示 requestFullscreen()：全屏播放 exitFullscreen()：退出全屏播放 isFullscreen():boolean：是否全屏播放 dispose()：销毁播放器 error(MediaError)：设置一个错误 error():MediaError：获取当前错误。配合error事件

事件 通过Player.on(string, EventListener)函数可以设置播放器的监听事件，第一个参数是事件名称，第二个参数是回调。 同样这里说说常用的事件，所有事件大家可以查阅官网docs.videojs.com/player

canplay：视频可以播放 playing：播放 pause：暂停 timeupdate：播放进度更新 ended：播放完成 fullscreenchange：全屏状态改变 error：视频播放错误。可以配合player的error函数来获取处理错误。代码如下：

   player.on("error", () => {
      const error = player.error();
      console.log("video error:" + error.code + "-" + error.message);
    });






    checkVideo() {
    var myPlayer = videojs("my-video");
    myPlayer.src([
        {
            type: "application/x-mpegURL",
            src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道
        }
    ]);
    myPlayer.play();
}