vue+vue-video-player+sockjs完成直播和聊天室(PC+h5)
作者:互联网
需要安装的第三方包
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; } }
标签:vue,console,log,PC,sockjs,video,import,true,playsinline 来源: https://www.cnblogs.com/js-liqian/p/12487895.html