前端嵌入视频直播和聊天支持.m3u8格式

1、安装vue-video-player

npm install vue-video-player --save

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

?

1 2 3 4

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中配置数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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、在页面中测试

?

1 2 3 4 5 6

{  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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

// 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

//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播放问题