移动端遇到的问题小结--video

Posted waterfowl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端遇到的问题小结--video相关的知识,希望对你有一定的参考价值。

本篇主要是针对Android系统,所遇到的问题。

  • 1. video的全屏处理:

  这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏。要想全屏效果只需对video标签加   webkit-playsinline 。

  但是这样做会有一个问题:针对偏长的手机,视频会出现居中的效果。针对这种情况,可以对video加属性  object-fit:fill 

<video id="myvideo" src="test.mp4" webkit-playsinline="true" object-fit:fill></video>
  • 2. video的自动播放

  自动播放是指页面加载完毕后,视频自动开始播放。但是目前而言,android机是不支持这种自动播放的。

  解决办法:引导用户触发滑屏或者touch事件进行触发 video.play()  进行播放

  

 

以上是关于移动端遇到的问题小结--video的主要内容,如果未能解决你的问题,请参考以下文章

关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题

移动端经常遇到的小bug

移动端代码规范小结

在移动端怎么将HTML5中的video标签的控件去掉或者隐藏

移动端video无法自动播放问题

移动 web 开发问题和优化小结