当前位置： 移动技术网 > IT编程>网页制作>CSS > im聊天中视频播放遇到的问题及解决办法

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

2018年02月07日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网