1. 首页
  2. web前端

移动端视频兼容性问题汇总

在开发移动端,开发视频的时候遇到的一些可解决的问题与不可解决的问题汇总,希望以后 大家引以为戒,不要踩重复的坑,浪费大家宝贵的时间。

在开发移动端,开发视频的时候遇到的一些可解决的问题与不可解决的问题汇总,希望以后 大家引以为戒,不要踩重复的坑,浪费大家宝贵的时间。

一、遇到可解决的问题

1、视频默认封面:poster视频封面 , 建议添加此属性,如果未设置该属性,默认使用视频第一帧 (小部分机型兼容 性不好);

2、音量:muted静音 不添加静音会导致,手机不支持自动播放(但是还有个别手机不支持自动播 放)

3、视频同层播放:在不设置同层播放视频点击播放按钮会自动全屏,可添加以下属性

//解决⽅案
x5-video-player-type="h5"//解决ios安卓播放⾃动全屏问题
x5-video-player-type="h5-page"//解决ios安卓播放⾃动全屏问题
"x5-video-player-fullscreen": true,//解决⾃动全屏问题
x5-playsinline
webkit-playsinline
playsinline
//个别机型不⽀持可以引⽤第三⽅库 iphone-inline-video
//https://github.com/fregante/iphone-inline-video

4、视频循环播放 loop :建议设置视频循环播放属性,因为视频标签被微信或者其他浏览器劫持后, 暂停,部分浏览器 会插入腾讯的广告(可以规避广告问题)

5、开始短暂黑屏:部分android机型点击播放视频时,会出现短暂1~2s的黑屏。该问题出现可能是还 没请求完成可顺 利播放的视频。

//解决方案:在视频上叠加一个div,把它的背景图换成首帧图。监听timeupdate事件,有视频播放时移除该div。
<div @click="play">
  <video
  ref="video"
  :class="{'playing': playing}"
  :poster="startSource"
  x-webkit-airplay="allow"
  x5-video-player-type="h5"
  x5-playsinline
  webkit-playsinline playsinline>
  <source :src="videoSource" type="video/mp4" />
  </video>
  <div :class="['cover-start']" v-if="!playing"></div>
</div>
<script>
   this.videoNode.addEventListener('timeupdate', () => {
      // 当视频的currentTime大于0.1时表示黑屏时间已过,已有视频画面,可以移除浮层
      if (this.videoNode.currentTime > 0.1 && !this.playing) {
        this.playing = true
      }
    }, false)
</script>

6、自动播放:视频自动播放必须添加 muted静音 属性 如果只在微信端使用有以下觉解办法

// 只适用于iPhone和android 注意自动播放的视频要无音轨或者手动muted
<!-- 必须加在微信api资源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  let that = this
  if (window.WeixinJSBridge) {
      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
          video.play()
      }, false);
  } else {
      document.addEventListener("WeixinJSBridgeReady", function () {
          WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
              video.play()
          });
      }, false);
  }
</script>

7、safari可以缩放视频

//通常情况在meta的viewport中设置user-scalable=no即可。但是IOS 10以后的safari中,apple为了提高Safari中网站的辅助功能,即使网站在视口中设置该属性,用户也可以手动缩放。
// IOS10 Safari不识别meta,故需要js hack
document.documentElement.addEventListener('touchstart', function (event) {
 if (event.touches && event.touches.length > 1) {
    event.preventDefault()
 }
}, false)

8、视频层级:如果视频存在最高层,需要弹出分享引导或者弹框需要在视频上方展示的时候,可以 先隐藏视频 display:none; 展示视频的封面图,并且加播放按钮。

9、切换视频:在使用第三方插件的时候,切换视频尽量不要重新创建表签,直接修改地址。

二、遇到不可解决的问题

1、微信劫持: 部分安卓手机会被微信劫持,换成微信原生的标签,在此期间没有劫持的唯一标示, 无法判断微信什么 时候劫持的标签,无法作出相应的操作(无法解决)

2、自动播放:部分手机机型不支持自动播放功能,必须用户手动触发才会播放(无法解决) 3、视频黑屏问题:部分手机机型锁屏再打开,视频区域会变成黑色只有点击播放按钮才会有视频出

现(无法解决)

4、视频层级问题:如果视频添加 controls 属性 则视频会超出文档流 始终存在最高级(无法解决)

5、视频记忆性播放:如果遇到使用第三方视频插件,微信和部分浏览器会劫持此插件 , 导致时间设 置的不准确, 还会。造成记忆性播放时间记录不上!(无法解决)

6、视频圆⻆:部分手机机型不支持视频设置圆⻆,如果视频添加了 controls 属性 脱离文档流无法覆 盖 导致圆⻆问 题无法解决 (无法解决)

7、音量按钮:在使用第三方插件视频被劫持,默认静音的情况下 , 原生微信标签 没有音量按钮无 法,开启音量

注意 :标签的音量和手机系统的音量不是同一个音量(无法解决)

原创文章,作者:小克

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=2231

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

登录后才能评论

评论列表(1条)

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code