H5 视频播放 video使用总结

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

关于video的用法，详细原文，大家可以点这里
https://developer.mozilla.org...

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

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

2、但是实际需求不会这么简单，老板还希望在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端视频是会全屏播放的，你要提交表单就要暂停视频，那样就会退出全屏，然后操作表单，
视频在暂停的情况下是不会挡住表单的

播放视频

退出视频

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

3、上一个问题解决了，但是又有一个问题，就是点开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端完美

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