im 聊天中视频播放
问题描述
在 im 聊天聊天消息为视频时,可以点击播放;ios 会有统一的样式,但是在 android 上,微信平台会自动接管全屏播放,但是在 M 站上样式一踏糊涂;
解决方案
解决思路:
在 video 播放时,将video 播放设置全屏
//部分安卓机型(vivo x9;小米 note3)im聊天中播放发送的视频;先横屏,再点击播放,才正常;解决方案:先调用全屏的方法;然后再进行播放;
if (this.$refs.videoHtml.requestFullscreen) {
this.$refs.videoHtml.requestFullscreen();
} else if (this.$refs.videoHtml.mozRequestFullScreen) {
this.$refs.videoHtml.mozRequestFullScreen();
} else if (this.$refs.videoHtml.webkitRequestFullScreen) {
this.$refs.videoHtml.webkitRequestFullScreen();
}
this.$refs.videoHtml.play();
//当用户退出播放视频时,还会有声音;
//解决方案:监听video,退出全屏,video 暂停;
$(document).on(
'fullscreenchange webkitfullscreenchange mozfullscreenchange', // webkitfullscreenchange/mozfullscreenchange
function (evt) {
let flag=document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen;
if (!flag){
that.$refs.videoHtml.pause()
}
});