您现在的位置：首页 >> 前端 >> 内容

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

时间：2018/2/6 13:59:04 点击：

　　核心提示：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()
    }
  });