html5 video 移动端填坑记

待我称王封你为后i 2022-04-21 16:50 220阅读 0赞

本文介绍了html5 video 移动端填坑记，分享给大家，具体如下：

**自动播放**

**设置autoplay属性**

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;video autoplay&gt;&lt;/video&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**移动浏览器中**

但是在很多移动浏览器里，都是要求用户的真实操作来（touchend、click、doubleclick 或 keydown 事件等标准的事件）触发调用video.play(),才能自动播放影音视频。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>dom.addEventListener(</code><code>'click'</code><code>, </code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>video.play()</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

**微信中**

也可以在 wx.ready()里触发video.play()

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>wx.ready(</code><code>function</code> <code>() { </code> <code>&nbsp;&nbsp;</code><code>video.play()</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

**内联播放**

设置属性 webkit-playsinline playsinline

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;video id=</code><code>"video"</code> <code>webkit-playsinline playsinline /&gt;&lt;/video&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频

如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline，在iOS10以后，需要加上playsinline,建议同时加上这两个属性。同时还需要app支持这种模式

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>webview.allowsInlineMediaPlayback = YES;</code> </td> 
 </tr> 
 </tbody> 
</table>

ios手Q和微信都支持这种模式，但是android 微信就挂了

**android 微信**

android微信内置浏览器采用腾讯X5内核，不遵循X5web标准，video强制全屏就是其一。视频播放完毕后还会出现QQ自己的视频推荐

据说，其有个白名单，白名单下的视频资源，就不会全屏。但是腾讯已经不能再增加白名单了。尿性，无解。。。。。。

目前还有一个解决办法，就是使用h5 canvas 播放 video

**canvas 播放视频**

使用canvas 遇到的坑：video 必须加 x5-video-player-type="h5" 属性，否则，在移动端就会卡死不能播放视频，个人认为是因为视频被接管的原因导致。

最后发现，虽然使用canvas播放视频，android微信中可以屏蔽全屏视频播放完的推荐视频。但是还没办法禁止视频播放时 的全屏问题。还是得万恶的白名单。吐槽。。。。。。。。。。。。。。。。  
更坑爹的是没有找到js触发退出全屏的方法。

**ios黑屏问题**

ios 在播放视频时，会出现短暂的黑屏，然后正常显示。

解决方法：

在视频上层覆盖一个 添加一个p并用一张图片填充，制造播放前加载假象。然后监听事件 timeupdate ，视频播放有画面时移除这个“p块”

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>video.addEventListener(</code><code>'timeupdate'</code><code>, </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;</code><code>if</code><code>(video.currentTime &gt; 0.1){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>posterImg.hidden();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

**Media 方法和属性**

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 </td> 
 <td> <code>// 媒体错误</code> <code>MediaObj.error; </code><code>//null:正常</code> <code>MediaObj.error.code; </code><code>//1.用户终止 2.网络错误 3.解码错误 4.URL无效</code> &nbsp; <code>//媒体当前状态</code> <code>MediaObj.currentSrc; </code><code>//返回当前资源的URL</code> <code>MediaObj.src = value; </code><code>//返回或设置当前资源的URL</code> <code>MediaObj.canPlayType(type); </code><code>//是否能播放某种格式的资源</code> <code>MediaObj.networkState; </code><code>//0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源</code> <code>MediaObj.load(); </code><code>//重新加载src指定的资源</code> <code>MediaObj.buffered; </code><code>//返回已缓冲区域，TimeRanges</code> <code>MediaObj.preload; </code><code>//none:不预载 metadata:预载资源信息 auto:</code> &nbsp; <code>//准备状态</code> <code>MediaObj.readyState;</code><code>//1:HAVE_NOTHING </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//2:HAVE_METADATA </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//3.HAVE_CURRENT_DATA </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//4.HAVE_FUTURE_DATA </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//5.HAVE_ENOUGH_DATA</code> <code>MediaObj.seeking; </code><code>//是否正在seeking</code> &nbsp; <code>//回放状态</code> <code>MediaObj.currentTime = value; </code><code>//当前播放的位置，赋值可改变位置</code> <code>MediaObj.startTime; </code><code>//一般为0，如果为流媒体或者不从0开始的资源，则不为0</code> <code>MediaObj.duration; </code><code>//当前资源长度 流返回无限</code> <code>MediaObj.paused; </code><code>//是否暂停</code> <code>MediaObj.defaultPlaybackRate = value;</code><code>//默认的回放速度，可以设置</code> <code>MediaObj.playbackRate = value;</code><code>//当前播放速度，设置后马上改变</code> <code>MediaObj.played; </code><code>//返回已经播放的区域，TimeRanges，关于此对象见下文</code> <code>MediaObj.seekable; </code><code>//返回可以seek的区域 TimeRanges</code> <code>MediaObj.ended; </code><code>//是否结束</code> <code>MediaObj.autoPlay; </code><code>//是否自动播放</code> <code>MediaObj.loop; </code><code>//是否循环播放</code> <code>MediaObj.play(); </code><code>//播放</code> <code>MediaObj.pause(); </code><code>//暂停</code> &nbsp; <code>//视频控制</code> <code>MediaObj.controls;</code><code>//是否有默认控制条</code> <code>MediaObj.volume = value; </code><code>//音量</code> <code>MediaObj.muted = value; </code><code>//静音</code> &nbsp; <code>//TimeRanges(区域)对象</code> <code>TimeRanges.length; </code><code>//区域段数</code> <code>TimeRanges.start(index) </code><code>//第index段区域的开始位置</code> <code>TimeRanges.</code><code>end</code><code>(index) </code><code>//第index段区域的结束位置</code> &nbsp; <code>//【★★★**相关事件**★★★】</code> <code>//事件分发</code> <code>var</code> <code>eventTester = </code><code>function</code><code>(e){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Media.addEventListener(e,</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log((</code><code>new</code> <code>Date</code><code>()).getTime(),e)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},false);</code> <code>}</code> <code>//事件监听</code> <code>eventTester(</code><code>"loadstart"</code><code>); </code><code>//客户端开始请求数据</code> <code>eventTester(</code><code>"progress"</code><code>); </code><code>//客户端正在请求数据</code> <code>eventTester(</code><code>"suspend"</code><code>); </code><code>//延迟下载</code> <code>eventTester(</code><code>"abort"</code><code>); </code><code>//客户端主动终止下载（不是因为错误引起）</code> <code>eventTester(</code><code>"loadstart"</code><code>); </code><code>//客户端开始请求数据</code> <code>eventTester(</code><code>"progress"</code><code>); </code><code>//客户端正在请求数据</code> <code>eventTester(</code><code>"suspend"</code><code>); </code><code>//延迟下载</code> <code>eventTester(</code><code>"abort"</code><code>); </code><code>//客户端主动终止下载（不是因为错误引起），</code> <code>eventTester(</code><code>"error"</code><code>); </code><code>//请求数据时遇到错误</code> <code>eventTester(</code><code>"stalled"</code><code>); </code><code>//网速失速</code> <code>eventTester(</code><code>"play"</code><code>); </code><code>//play()和autoplay开始播放时触发</code> <code>eventTester(</code><code>"pause"</code><code>); </code><code>//pause()触发</code> <code>eventTester(</code><code>"loadedmetadata"</code><code>); </code><code>//成功获取资源长度</code> <code>eventTester(</code><code>"loadeddata"</code><code>); </code><code>//</code> <code>eventTester(</code><code>"waiting"</code><code>); </code><code>//等待数据，并非错误</code> <code>eventTester(</code><code>"playing"</code><code>); </code><code>//开始回放</code> <code>eventTester(</code><code>"canplay"</code><code>); </code><code>//可以播放，但中途可能因为加载而暂停</code> <code>eventTester(</code><code>"canplaythrough"</code><code>); </code><code>//可以播放，歌曲全部加载完毕</code> <code>eventTester(</code><code>"seeking"</code><code>); </code><code>//寻找中</code> <code>eventTester(</code><code>"seeked"</code><code>); </code><code>//寻找完毕</code> <code>eventTester(</code><code>"timeupdate"</code><code>); </code><code>//播放时间改变</code> <code>eventTester(</code><code>"ended"</code><code>); </code><code>//播放结束</code> <code>eventTester(</code><code>"ratechange"</code><code>); </code><code>//播放速率改变</code> <code>eventTester(</code><code>"durationchange"</code><code>); </code><code>//资源长度改变</code> <code>eventTester(</code><code>"volumechange"</code><code>); </code><code>//音量改变</code> </td> 
 </tr> 
 </tbody> 
</table>