1、iOS上息屏、切后台可能会出现断开连接的情况，需要加心跳包
2、（针对嵌入在APP中的H5页面）如果需要需要监听横竖屏（监听window.orientation或者innerWidth），可以在监听方法外设置少许延时，防止监听方法过早得执行
3、移动端的video设置autoplay属性是无效的，播放需要用户点击
4、video在iOS和安卓中都会自动全屏，可以添加： webkit-playsinline="true" playsinline x5-playsinline="true"；阻止自动全屏
5、vue中socket.io的使用:
main.js中引入：
import VueSocketio from 'vue-socket.io';
Vue.use(VideoPlayer,VueSocketio)
用到的组件中：
this.socketTimeout && clearTimeout(this.socketTimeout);
this.socketTimeout = setTimeout(() => {
this.$socketio = io('http://io.xxx.com')
var socket = this.$socketio
socket.on("connect", (res) => { //连接socket
console.log('connected,socketid为',socket.id,this.roomId)
socket.emit('join', this.roomId) //加入房间
if (this.heartBeatInterval) {
clearInterval(this.heartBeatInterval);
}
this.heartBeatInterval = setInterval(() => { //发送心跳包，向服务器证明自己还活着。。
socket.emit('HEARTBEAT');
}, 20000)
});
socket.on('disconnect', (reason) => { //断线判断是否重连
console.log('reason',reason)
if (reason === 'io server disconnect') {
socket.connect();
}else if(reason === 'io client disconnect'){
socket.close();
}
});
socket.on('message', (res) => { //调用接口后服务端返回的socket内容,根据标识执行不同的代码
if(res.eventType == "TEAMLIKE"){
if(res.teamId == this.teamRight.id){
// this.teamRight.like_count = res.likeCount
this.$set(this.teamRight,'like_count',res.likeCount)
console.log(this.teamRight.like_count)
}else{
// this.teamLeft.like_count = res.likeCount
this.$set(this.teamLeft,'like_count',res.likeCount)
console.log(this.teamLeft.like_count)
}
}
}, 50);
6、打包上线时：
使用‘/static/XXX’
js、CSS加载不到资源，修改config/index.js中assetsPublicPath为‘./’
只有css中的background资源取不到时，①、修改build/utils.js中找到
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
添加：publicPath: '../../',
②、可能后端未将图片放入相应static文件夹
7、微信授权时出现部分手机在微信浏览器中打不开授权界面的情况，这种情况可能是浏览器缓存的原因，可以在重定向URL中加入时间戳，保证每次请求的地址都是是最新的：
let redirectUrl = encodeURIComponent('http://app.binvshe.com/weixin/redirect?uri=' + uri +'?r=' + date.getTime() + '&hash=authorize')
连接中拼接入：r=(唯一值)
未解决的难点：
1、嵌入APP中的H5页面横竖屏切换时，video会暂停；这种情况在其他浏览器中不会出现
2、安卓中点击输入框，弹出的软键盘会把输入框遮住，尝试过1、scrollIntoViewIfNeeded()2、document.body.scrollTop = document.body.scrollHeight仍无法解决(最后发现是安卓APP端代码问题)
3、playsinline+webkit-playsinline在iOS中基本上可以完美解决自动全屏的问题，但是在安卓的微信浏览器中会导致视频无法播放，但是如果不加的话又会导致iOS及安卓其他浏览器中video自动全屏
网友评论