前端vue播放m3u8、flv、mp4视频的方法

1、播放m3u8格式视频

1. 安装依赖

   npm install video.js --save // 视频播放器插件

   npm install videojs-contrib-hls --save // 播放hls流插件

2. 页面引入插件

import videojs from "video.js";import "video.js/dist/video-js.css";

1. 页面中的使用

                  import videojs from "video.js";import "video.js/dist/video-js.css";export default {  data() {    return {      dp: null,      options: {      playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度        aspectRatio:'16:9',        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。        autoplay: false, // 设置自动播放        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）        preload: "auto", // 预加载        controls: true, // 显示播放的控件      },      attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8",    };  },  mounted() {   // 使用 $nextTick 解决vedio报错  The element or ID supplied is not valid. (videojs)    this.$nextTick(() => {      this.loadVideo();    });  },  methods: {    loadVideo() {      this.dp = videojs("videoPlayer", this.options);      // 也可以使用以下方式给vedio设置 src      // this.db.src([      //   {      //     src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址      //     type: "application/x-mpegURL", // 告诉videojs,这是一个hls流      //   },      // ]);    },    // 销毁    beforeDestroy() {      if (this.dp) {        this.dp.dispose(); // dispose()会直接删除Dom元素      }    },  },};.video-box {  width: 100%;  max-width: 500px;  max-height: 500px;}// 暂停播放按钮居中::v-deep .video-js .vjs-big-play-button {  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

2、flv格式的方案来播放视频

简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

开源地址: https://github.com/Bilibili/flv.js/

1. 安装依赖

   npm install --save flv.js

2. 页面引入插件

import flvjs from 'flv.js'

1. 页面中的使用

                    import flvjs from 'flv.js'  export default {    data() {      return {        isPlay: false,        player: null,        timerId:null      };    },    methods: {       // 设置视频配置(注意：createVideo应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)       createVideo() {        if (flvjs.isSupported()) {          var videoElement = document.getElementById('videoElement');          this.player= flvjs.createPlayer({            type: 'flv',            isLive: true,            hasAudio: false,            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'// 自己的flv视频流            enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程            stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb            stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒            seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。            lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false            lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒            deferLoadAfterSourceOpen: false,          },{            cors: true, // 是否跨域            // enableWorker: true, // 是否多线程工作            enableStashBuffer: false, // 是否启用缓存            // stashInitialSize: 128, // 缓存大小(kb)  默认384kb            autoCleanupSourceBuffer: true, // 是否自动清理缓存          });          this.player.attachMediaElement(videoElement);//挂载元素          this.player.load();//加载流          this.player.play();//播放流          // 追帧           if (this.timerId !== null) {             clearInterval(this.timerId);           }           this.timerId = setInterval(() => {             if (videoElement.buffered.length > 0) {               const end = videoElement.buffered.end(0); // 视频结尾时间               const current = videoElement.currentTime; //  视频当前时间               const diff = end - current; // 相差时间               console.log(diff);               const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转               const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放               const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度               let playbackRate = 1.0; // 播放速度               if (diff > diffCritical) {                 console.log("相差超过4秒，进行跳转");                 videoElement.currentTime = end - 1.5;                 playbackRate = Math.max(1, Math.min(diffCritical, 16));               } else if (diff > diffSpeedUp) {                 console.log("相差超过1秒，进行加速");                 playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));               }               videoElement.playbackRate = playbackRate;               if (videoElement.paused) {                 this.videoForm.player.play();               }             }           }, 1000);        }        // 报错重连         this.player.on(flvjs.Events.ERROR, (err, errdet) => {          // 参数 err 是一级异常，errdet 是二级异常          if (err == flvjs.ErrorTypes.MEDIA_ERROR) {            console.log('媒体错误')            if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {              console.log('媒体格式不支持')            }          }          if (err == flvjs.ErrorTypes.NETWORK_ERROR) {            console.log('网络错误')            if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {              console.log('http状态码异常')            }          }          if(err == flvjs.ErrorTypes.OTHER_ERROR) {            console.log('其他异常：', errdet)          }           if (this.player) {             this.destoryVideo()             this.createVideo()           }         })      },      destoryVideo(){        if (this.player) {          this.player.pause();// 暂停播放数据流          this.player.unload();// 取消数据流加载          this.player.detachMediaElement();// 将播放实例从节点中取出          this.player.destroy(); // 销毁播放实例          this.player= null;        }      }    },    mounted() {      this.$nextTick(() => {        this.createVideo()      })    },    beforeDestroy() {      this.destoryVideo()  },  }; 

3、mp4格式的方案来播放视频

      camera          function play() {        var video = document.getElementById("video");        video.play();      }                                        
You must have an HTML5 capable browser.