需要安装的第三方包
npm install vue-video-player --save // 直播播放插件（注意不能同时安装videojs，也不能使用cnpm安装否则会报“The "flash" tech is undefined. Skipped browser support check for that tech”，）
注意：
- 如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS
- 如果需要播放 RTMP 流，需要安装 videojs-flash 插件
- 如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
npm install--save videojs-flash // 启用flash进行播放，有兼容问题（火狐），所以我们项目中只使用了hls进行播放
npm i videojs-contrib-hls // 解决ios播放问题
npm i jquery // 用于解决移动端自动全屏问题
// 聊天室用到的sockjs
npm i sockjs
npm i stompjs
在main.js中引入
import 'video.js/dist/video-js.css' import './components/video-player/custom-theme.css'
class使用 vjs-custom-skin videoPlayer
<template>
<videoPlayer
class="vjs-custom-skin videoPlayer"
options="playerOptions"
@click.native=onPlayerPlay($event)>
@canplay="onPlayerCanplay($event)"
playsinline="playsinline"
</videoPlayer>
</template>
组件中引入
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文件，所以直接引入的
注册组件
components: {
videoPlayer
},
// 直播配置（还有很多配置，百度可以搜到）
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.如何隐藏进度条（这是源文件里）
需要写在全局style中，在mainjs中引入
2.解决移动端自动全屏的问题（微信）
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
// 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; } }