最近用 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 thefirst frame is available, then the first frame is shown as the posterframe.
它的例子也有解析
Until the video starts playing, the image provided in the posterattribute is displayed in its place. If the browser doesn’t supportvideo 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 端完美
到这里就记录一下这次的问题