H5 视频播放 video使用总结

最近用vue在作一个H5页面，有一个播放视频的功能，作完了总结一下

关于video的用法，详细原文，你们能够点这里
https://developer.mozilla.org...

一、若是你只是单纯的想在页面播放一个视频，下面的代码已经足够了，还支持ios和Android小窗播放

<video class="video" controls>
      <source src="../company.mp4" type="video/mp4">
    </video>

二、可是实际需求不会这么简单，老板还但愿在H5上有个表单提交的功能，没问题，在下面加就是，表格出来了

可是我点了视频播放，而后再提交表单，在Android懵逼了

视频把表单挡住了，ios是没有这个问题的，这怎么搞呀

个人解决办法是

<video
      playsinline="true"
      x-webkit-airplay="true" 
      x5-playsinline="true"
      webkit-playsinline="true" 
      x5-video-player-type="h5"
      controls
    >
      <source src="../company.mp4" type="video/mp4">
    </video>

这样在Android端视频是会全屏播放的，你要提交表单就要暂停视频，那样就会退出全屏，而后操做表单，
视频在暂停的状况下是不会挡住表单的

播放视频

退出视频

点击表单，发现不会被挡住了

三、上一个问题解决了，可是又有一个问题，就是点开H5进去后，ios显示视频是一片白，Android是一片黑，老板但愿视频没播放前显示视频首屏的图片。

ios

Android

查了一下网上的解决办法都是用dom解决，有兴趣的朋友能够看一下
https://blog.csdn.net/qq_4095...
我以为比较麻烦，就去看了一下开发者文档，就发现了一个彩蛋，比上面的方法要简单得多，一行代码解决问题
video有poster这个属性

poster
A URL for an image to be shown while the video is downloading.
If this attribute isn't specified, nothing is displayed until the
first frame is available, then the first frame is shown as the poster
frame.

它的例子也有解析

Until the video starts playing, the image provided in the posterattribute is displayed in its place. If the browser doesn't support
video playback, the fallback text is displayed.
因此我最后的代码是以下:

<video
      class="video"
      poster="../assets/video.png"
      playsinline="true"
      x-webkit-airplay="true" 
      x5-playsinline="true"
      webkit-playsinline="true" 
      x5-video-player-type="h5"
      controls
    >
      <source src="../company.mp4" type="video/mp4">
    </video>

ios端完美

Android端完美

到这里就记录一下此次的问题