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

到這裏就記錄一下此次的問題