H5 视频播放 video使用总结

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

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

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

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

《H5 视频播放 video使用总结》

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

《H5 视频播放 video使用总结》
但是我点了视频播放,然后再提交表单,在Android懵逼了

《H5 视频播放 video使用总结》
视频把表单挡住了,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 视频播放 video使用总结》

退出视频

《H5 视频播放 video使用总结》

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

《H5 视频播放 video使用总结》

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

ios

《H5 视频播放 video使用总结》

Android

《H5 视频播放 video使用总结》

查了一下网上的解决办法都是用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.

《H5 视频播放 video使用总结》

它的例子也有解析

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端完美

《H5 视频播放 video使用总结》

Android端完美

《H5 视频播放 video使用总结》

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

    原文作者:一舧
    原文地址: https://segmentfault.com/a/1190000017375522
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞