欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

im聊天中视频播放遇到的问题及解决办法

程序员文章站 2022-05-03 19:36:02
im 聊天中视频播放 问题描述 在 im 聊天聊天消息为视频时,可以点击播放;ios 会有统一的样式,但是在 android 上,微信平台会自动接管全屏播放,但是在 M 站上样...

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()
    }
  });