vue 嵌入 video.js 看直播 （ 名正言順的看電視 ）

安裝內容

npm i video.js -S //視頻播放器

npm i videojs-contrib-hls -S // 這是播放hls流需要的插件

npm i mux.js -S // 在vue項目中，若不安裝它可能報錯（ 很大概率會報錯，不信的可以自己試試看 ）

 

傻瓜式代碼，復制粘貼即可用

 

<template>
  <div>

    <div style="margin-top: 30px; margin-bottom: 30px; color: Red">
      <span>視頻加載比較慢，請耐心等候。</span>
      <br />
    </div>

    <div class="width">
      <!-- <section> -->
        <!-- <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          class="vjs-custom-skin videoPlayer"
          :playsinline="true"
        /> -->
        <video id="videoPlayer" class="video-js" muted></video>
      <!-- </section> -->

      <!-- <video :src="address" style="border:1px solid red;"></video> -->
      <!-- <div id="dplayer" class="play-root" ></div>
      <div @click="onPlay">點我播放</div> -->
    </div>

  </div>
</template>
<script>

import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import Videojs from "video.js";
import "videojs-contrib-hls";

export default {
  
  data () {
    return {

      nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",

      // 視頻播放
      videoOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可選擇的播放速度
        autoplay: true, //如果true,瀏覽器准備好時開始回放。
        muted: false, // 默認情況下將會消除任何音頻。
        loop: true, // 視頻一結束就重新開始。
        preload: "auto", // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
        flash: {
          hls: { withCredentials: false },
        },
        html5: { hls: { withCredentials: false } },

        sources: [
          {
            type: "application/x-mpegURL",
            src: "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8",
          },
        ],
        poster: "", //你的封面地址
        width: "100%",
        height: "100%",
        notSupportedMessage: "此視頻暫無法播放，請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
        controlBar: {
          timeDivider: true, //當前時間和持續時間的分隔符
          durationDisplay: true, //顯示持續時間
          remainingTimeDisplay: false, //是否顯示剩余時間功能
          fullscreenToggle: true, //全屏按鈕
        },
      },

    }
  },
  mounted() {
    this.initVideo(this.nowPlayVideoUrl);
  },
  destroyed() {
    this.videoPlayer.dispose();
  },
  methods: {
    initVideo(nowPlayVideoUrl) {
      // 這些options屬性也可直接設置在video標簽上，見 muted
      let options = {
        autoplay: true, // 設置自動播放
        controls: true, // 顯示播放的控件
        sources: [
          // 注意，如果是以option方式設置的src,是不能實現 換台的 (即使監聽了nowPlayVideoUrl也沒實現)
          {
            src: nowPlayVideoUrl,
            type: "application/x-mpegURL", // 告訴videojs,這是一個hls流
          },
        ],
      };
      // videojs的第一個參數表示的是，文檔中video的id
      const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 這里的this是指Player,是由Videojs創建出來的實例
        // console.log(myPlyer === this); // 這里返回的是true
      });
    },
  }
}
</script>

 

 

 

 

 

 

 

 

 

代碼抄完了，接下來有興趣的可以了解一下背后的坑。沒興趣的可以退出了。

 

坑點一：視頻不能自動播放或者報錯 DOME.xception:play()failed

報錯信息：DOMException: play() failedbecause the user didn’t interact with the document first.(用戶還沒有交互,不能調用play)

解決方案：設置 muted ， 例如 ： <video id="videoPlayer" class="video-js" muted></video>

知識點普及：

　　關於muted屬性：

　　　　muted 屬性,設置或返回音頻是否應該被靜音（關閉聲音）;屬性的值是true和false;
　　　　muted="false" 表示視頻不用靜音（視頻播放便有聲音），但設置 muted="fasle" 的情況下，視頻無法實現自動播放。
　　　　video 標簽中 muted 的作用： 允許視頻自動播放；（Chrome66版本開始，禁止視頻和音頻的自動播放）

坑點二：找不到mux.js模塊

報錯信息：* mux.js/lib/tools/parse-sidx in ./node_modules/video.js/dist/video.es.js To install it, you can run: npm install --save mux.js/lib/tools/parse-sidx

解決方案：安裝 mux.js => npm i mux.js -S

 

坑點三：播放 rtmp/rtsp 直播流 

　　需要引入： 

　　　　import "videojs-flash"; // 播放rtmp流需要的插件 

　　　　type: 'rtmp/flv', // 這個type值必寫, 告訴videojs這是一個rtmp流視頻

報錯信息：視頻無法播放並且顯示flash已經被禁用

解決方案：很遺憾的告訴你們，目前博主也沒有找到解決方案。歡迎有解決方案的留言一起討論一起實現。注：flash 於 2020-12-31日起被禁用。

 

最后注解一下：以防日后需要

https://blog.csdn.net/ddx2019/article/details/111310294

https://blog.csdn.net/angle_lzc/article/details/103493362