前端嵌入視頻直播和聊天支持.m3u8格式

1、安裝vue-video-player

npm install vue-video-player --save

2、在main.js中引入vue-video-player

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

　　

3、在頁面中使用插件

<video-player  class="video-player vjs-custom-skin"
  ref="videoPlayer" 
  :playsinline="true" 
  :options="playerOptions"
></video-player>

 

4、在data中配置數據

  playerOptions : {
    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,瀏覽器准備好時開始回放。
    muted: false, // 默認情況下將會消除任何音頻。
    loop: false, // 導致視頻一結束就重新開始。
    preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
    fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
    sources: [{
      type: "application/x-mpegURL",//這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目
      src: "http://hls01open.ys7.com/openlive/6d499d610a0c4a6182e36ac7dca124ad.m3u8" //url地址
    }],
    poster: "../../static/images/test.jpg", //你的封面地址
    // width: document.documentElement.clientWidth, //播放器寬度
    notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true  //全屏按鈕
    }
}

　　

5、重新賦值視頻地址

this.playerOptions['sources'][0]['src'] = '接口地址'

完成以上配置就可以播放視頻了
需要在第四步的 playerOptions中配置一下
type和src 其中不支持.m3u8格式的視頻，如果需要播放.m3u8格式的需要繼續下載插件

五、兼容.m3u8格式的視頻操作

1、需要下載videojs-contrib-hls

npm install --save videojs-contrib-hls

2、在頁面或者組件中引入

import 'videojs-contrib-hls' 

3、在頁面中測試

{
 type: 'application/x-mpegURL', // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目
 //src:
  'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址，從別的博主那看來的地址，親測可用
src: "https://assets.ygunoil.com/style/video/yys-app-intro-v4.mp4?avvod/m3u8"
}

　

六、聊天室用到sockjs

　　npm i sockjs

　　npm i stompjs

// 
import 'video.jsdistvideo-js.css'
import {videoPlayer} from 'vue-video-player'
//  import 'videojs-flash'


//  ios
import 'videojs-contrib-hls' // 避免flash兼容問題，所以都使用pc和h5都使用hls播放

//  SockJS
// import SockJS from  'sockjs-client';
//  import Stomp from 'stompjs';
import  {Stomp} from '@/assets/js/stomp.js'; // 因為我使用的是后台給我的Js文件，所以直接引入的

//  直播配置（還有很多配置，百度可以搜到）
      playerOptions: {
         height: '529',
         width: '940',
        sources: [
          //  {
          //     // src: rtmp58.200.131.21935livetvhunantv, // 湖南台的直流地址
          //    type: 'rtmpmp4',
          //  },
          //  {
          //    type: 'applicationx-mpegURL',
          //    src: 'httpivi.bupt.edu.cnhlscctv1hd.m3u8',
          //  }
        ], // 表示組件會按順序自動識別，如果第一個不能播放，則使用下一個（流配置，數組形式，會根據兼容順序自動切換）
        notSupportedMessage: '請刷新頁面', // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。//有些提示不生效，直接去node_modules里去改源文件
        autoplay: false, // 是否自動播放
        controls: true, // 控制條
        // poster , 你的封面地址
        controlBar: {
          timeDivider: false, // 當前時間和持續時間的分隔符
          durationDisplay: false,// 顯示持續時間
          remainingTimeDisplay: false, // 是否顯示剩余時間功能
          fullscreenToggle: true // 全屏按鈕
        }
      },

　　

//1.解決移動端自動全屏的問題（微信）
  computed: {
    playsinline(){
      var ua = navigator.userAgent.toLocaleLowerCase();
      console.log(ua)
       //x5內核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false
      }else{
        //ios端
        return true       
      }
    },

//  在vue-video-player的onPlayerCanplay(視頻可播放)這個方法中添加回調

 onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
        //解決自動全屏
        var ua = navigator.userAgent.toLocaleLowerCase();
        //x5內核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        
          $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
      }else{
        //ios端
          $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true") 
      }
    }
  },

　　

//  sockjs(在mounted中調用this.initWebSocket())
    initWebSocket() {
      this.connection();
      let self = this;
      //  斷開重連機制,嘗試發送消息,捕獲異常發生時重連
      this.timer = setTimeout(() => {
        try {
          self.stompClient.send(test);
        } catch (err) {
          // console.log(斷線了  + err);
          self.connection();
        }
      }, 5000);
    },
    removeTab(targetName) {
      console.log(targetName)
    },
    connection() {
      console.log(this.detailsObj)
      //  建立連接對象(${l_url}liveLesson后台給的地址)
      this.socket = new SockJS(`${l_url}liveLesson`);//連接服務端提供的通信接口，連接以后才可以訂閱廣播消息和個人消息
      console.log(this.socket)
      //  獲取STOMP子協議的客戶端對象
      this.stompClient = Stomp.over(this.socket);
      console.log(this.stompClient)
      //  延遲重連時間
      this.stompClient.reconnect_delay = 3000
      //  定義客戶端的認證信息,按需求配置
      var headers = {
        userId: this.$store.state.user_info.userId,
        liveStreamId: this.detailsObj.liveStreamId
      };
      let fid = this.detailsObj.liveStreamId
      console.log(this.$store.state.user_info.userId,fid)
      //  向服務器發起websocket連接
      this.stompClient.connect(headers,(frame) => {
        console.log('連接成功',frame)
      }, (err) => {// 連接發生錯誤時的處理函數
         　　　　 console.log(2222,err);
      　　　　}
　　　　)
    }

    //  斷開連接
    disconnect() {
       if (this.stompClient != null) {
         this.stompClient.disconnect();
         console.log(Disconnected);
       }
      if (this.socket != null) {
        this.socket.close();
        this.socket = null;
      }
    }

 

　注意：

1. 如果需要播放 RTMP 流，需要安裝 videojs-flash 插件
2. 如果兩個流都需要播放，flash 插件需要安裝到 hls 插件之前

　　npm install--save videojs-flash // 啟用flash進行播放，有兼容問題（火狐），所以我們項目中只使用了hls進行播放

　　npm i videojs-contrib-hls // 解決ios播放問題