欢迎光临
我的个人博客网站

关于移动端web在360手机浏览器上播放video视频时出现的bug


在做手机web开发时 手机页面的video标签的poster预览图在360手机浏览器中被视频所覆盖无法显示,同时会出现video标签中视频只显示一半另一半黑屏的bug

错误复现

由于webstorm内置的tomcat不能在内网访问(vscode可以启动项目后访问),所以作者就直接将出现bug的页面放置到tomcat的webapps中,让处以同一网段的手机通过360手机浏览器访问(这里推荐在电脑上将对应的内网ip地址和项目地址合并后通过如草料二维码等网站生成二维码后手机直接扫码访问).

关于移动端web在360手机浏览器上播放video视频时出现的bug

关于移动端web在360手机浏览器上播放video视频时出现的bug

相应位置的代码

.mp4 {     height: 7rem;     width: 75%;     margin: auto;     display: flex;     justify-content: center;     align-items: center;     outline: none;     overflow: hidden;         }  <video id="myVideo"  poster="static/img/loginbackground.jpg"  style="outline: none;width: 100%;object-fit: fill;">    <source src="static/mp4/arrow.mp4" type="video/mp4"/> </video> 

解决方案

在video视频标签上添加

controls360=no  // 关闭360内置播放器,防止出现视频只显示一半另一半黑屏的bug preload="none" // 页面加载后不加载视频,设置后可显示poster,猜测360手机浏览器在做适配时设置的默认参数不是none 

加入后的代码:

<video id="myVideo" controls360=no preload="none" poster="static/img/loginbackground.jpg"  style="outline: none;width: 100%;object-fit: fill;">    <source src="static/mp4/arrow.mp4" type="video/mp4"/> </video> 

问题解决

最后

十分感谢360手机浏览器相关人员的解答,原地址如下:

赞(0) 打赏
未经允许不得转载:张拓的天空 » 关于移动端web在360手机浏览器上播放video视频时出现的bug
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏