前端vue播放m3u8、flv、mp4視頻的方法示例

更新時間：2023年07月20日 11:12:20 作者：NIshihara

這篇文章主要給大家介紹了關于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下

1、播放m3u8格式視頻

安裝依賴

npm install video.js --save // 視頻播放器插件
npm install videojs-contrib-hls --save // 播放hls流插件

頁面引入插件

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

頁面中的使用

<template>
  <div class="myVideo">
    <video id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px">
      <source :src="attachmentLink" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
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，才可實現(xiàn)自動播放,同時視頻也被靜音（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元素
      }
    },
  },
};
</script>
<style lang="less" scoped>
.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%);
}
</style>

2、flv格式的方案來播放視頻

簡介：flv.js是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發(fā)，沒有用到 Flash。由 bilibili 網站開源。

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

安裝依賴

npm install --save flv.js頁面引入插件

import flvjs from 'flv.js'

頁面中的使用

<template>
  <div class="preview">
    <div class="videoArea">
      <video id="videoElement" crossOrigin="anonymous" controls autoplay muted width="100%" height="800px"></video>
    </div>
  </div>
</template>
<script>
  import flvjs from 'flv.js'
  export default {
    data() {
      return {
        isPlay: false,
        player: null,
      };
    },
    methods: {
       // 設置視頻配置(注意：createVideo應放在異步函數(shù)里或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視頻流
          },{
            cors: true, // 是否跨域
            // enableWorker: true, // 是否多線程工作
            enableStashBuffer: false, // 是否啟用緩存
            stashInitialSize: 128, // 緩存大小(kb)  默認384kb
            autoCleanupSourceBuffer: true // 是否自動清理緩存
          });
          this.player.attachMediaElement(videoElement);//掛載元素
          this.player.load();//加載流
          this.player.play();//播放流
        }
        // 報錯重連
         this.player.on(flvjs.Events.ERROR, (err, errdet) => {
          // 參數(shù) 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狀態(tài)碼異常')
            }
          }
          if(err == flvjs.ErrorTypes.OTHER_ERROR) {
            console.log('其他異常：', errdet)
          }
           if (this.player) {
             this.destoryVideo()
             this.createVideo()
           }
         })
      },
      destoryVideo(){
        if (this.player) {
          this.player.pause();// 暫停播放數(shù)據(jù)流
          this.player.unload();// 取消數(shù)據(jù)流加載
          this.player.detachMediaElement();// 將播放實例從節(jié)點中取出
          this.player.destroy(); // 銷毀播放實例
          this.player= null;
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.createVideo()
      })
    },
    beforeDestroy() {
      this.destoryVideo()
	  },
  };
</script>
<style lang="scss" scoped>
</style>

3、mp4格式的方案來播放視頻

<html>
  <head>
    <title>camera</title>
    <script type="text/javascript">
      function play() {
        var video = document.getElementById("video");
        video.play();
      }  
    </script>
  </head>
  <body>
    <video 
    	id="video" 
    	width="640" 
    	height="360"  
    	poster="/video/cover.png"http:// 視頻封面
    	controls //顯示標準的 HTML5 視頻/音頻播放器控制條、控制按鈕。
    	autoplay //讓文件自動播放。
    	loop //讓文件循環(huán)播放。
    	preload="auto" //屬性是用來緩存大體積文件的。它有三個可選值："none" 不緩存、"auto" 緩存、"metadata" 只緩存文件元信息
    	playsinline="true" // IOS微信瀏覽器支持小窗內播放
    	webkit-playsinline="true" // 這個屬性是ios 10中設置可以讓視頻在小窗內播放，也就是不是全屏播放*/ 
    	x5-video-player-type="h5" // 啟用H5播放器，是wechat安卓版特性
    	x5-video-player-fullscreen="true" // 全屏設置，設置為 true 是防止橫屏
    	x5-video-orientation="portraint" // 播放器屏幕的方向，landscape橫屏，portraint豎屏，默認值為豎屏。、、
    	οnclick="play()" > 
    	 <!-- 標簽是為了能夠兼容各種瀏覽器對不同媒體類型的支持，我們可以用多個<source></source>元素來提供多個不同的媒體類型。支持mp4格式視頻流的瀏覽器可以播放mp4文件，如果不支持，可以播放Ogg文件。 -->
    	 <!-- codecs=dirac, speex - 是用來指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻。 -->
    	<source src="/video/text.mp4" type="video/mp4">
    	<source src="/video/text.ogg" type="video/ogg; codecs=dirac, speex">
      <div class="fallback"> <p>You must have an HTML5 capable browser.</p> </div> 
    </video>
  </body>
</html>