以上為案例二維碼
首個(gè)H5案例解析
從頭開(kāi)始分析

在 iOS 上，APP 都是使用的系統(tǒng)自帶的瀏覽器進(jìn)行頁(yè)面渲染，video 播放視頻的效果是統(tǒng)一的，只需要考慮不同的 iOS 版本是否有不一致的地方。在 iOS 上，播放視頻默認(rèn)會(huì)彈出一個(gè)播放器全屏播放視頻，如下效果

播放器上下有的系統(tǒng)默認(rèn)的控制欄，可以控制視頻的播放進(jìn)度、音量以及暫停或繼續(xù)播放，播放視頻時(shí)，視頻會(huì) “浮” 在頁(yè)面上，頁(yè)面上的所有元素都只能是在視頻下面，這種效果顯然不是我們想要的。
但好在 iOS 10 Safari 中，video 新增了 playsinline 屬性，可以使視頻內(nèi)聯(lián)播放。(微信瀏覽器支持)

在 webkit 的 blog 上提到

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.

來(lái)源： http://www.cnblogs.com/zzsdre...
安卓實(shí)現(xiàn)：

TBS 內(nèi)核（>=036849）支持一個(gè)叫 同層播放器 的視頻播放器，這個(gè)不需要申請(qǐng)白名單，只需給 video 設(shè)置兩個(gè)屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果

結(jié)合IOS和安卓微信下同層播放器的實(shí)現(xiàn)代碼：

<video preload="load" data-link="http://wag.i-h5.cn/dj/wyf/video/wb.mp4" playsinline x-webkit-airplay="true" webkit-playsinlinex5-video-player-type="h5" x5-video-player-fullscreen="true" id="video" width="100%" src="http://wag.i-h5.cn/dj/wyf/video/wyf.mp4"></video>

稍微講一下video的事件

此案例并沒(méi)有使用timeupdate時(shí)間來(lái)實(shí)現(xiàn)播放進(jìn)度的監(jiān)聽(tīng)
在此案例中
要實(shí)現(xiàn)第一段視頻播放完，出現(xiàn)選項(xiàng)給用戶進(jìn)行視頻的選擇交互。
我們需要在出現(xiàn)選項(xiàng)時(shí)將視屏?xí)和?#xff0c;
先來(lái)看下代碼：

function getTime(obj){obj.timer = setInterval(function(){var t = obj.currentTime;if(isAndroid) {// 選項(xiàng)出現(xiàn)if(Math.abs(t - 32.13) <= .1 && istest) {selectBtn.style.display = 'block';obj.pause();clearInterval(obj.timer);}// // 墨鏡播放完必,鐲子播放完畢,帽子播放完畢if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.64 && typenum == 4) {selectBtn.style.display = 'block';obj.pause();istest = true;clearInterval(obj.timer);}} else {// 選項(xiàng)出現(xiàn)if(Math.abs(t - 32.13) <= .1 && istest) {selectBtn.style.display = 'block';// obj.currentTime = 32.13;obj.pause();clearInterval(obj.timer);}// // 墨鏡播放完必,鐲子播放完畢,帽子播放完畢if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.24 && typenum == 4) {selectBtn.style.display = 'block';obj.currentTime = 32.13;obj.pause();istest = true;clearInterval(obj.timer);}}// 項(xiàng)鏈播放，提前呼出點(diǎn)擊按鈕if(t > 172) {// aLink.style.display = 'block';// window.location.href = 'http://wag.i-h5.cn/dj/wyf/fenx.html';}},20); } /*** 視頻開(kāi)始play*/ video.addEventListener('play', function(){// ovstatus = 1;console.log("play")getTime(this); }, false);

該案例使用了定時(shí)器，在視頻開(kāi)始事件觸發(fā)時(shí)開(kāi)始每20ms觸發(fā)一次，判斷當(dāng)前視頻進(jìn)度，若到達(dá)需停止的進(jìn)度時(shí)（第一段片段播放完畢，或選項(xiàng)片段結(jié)束時(shí)），暫停視頻，并出現(xiàn)浮層div塊，為用戶提供交互。

點(diǎn)擊選項(xiàng)后跳到對(duì)應(yīng)的進(jìn)度，繼續(xù)播放視頻。以上為該案例主要需要解決的問(wèn)題。

安卓瀏覽器左上角會(huì)出現(xiàn)推出播放的返回按鈕，當(dāng)點(diǎn)擊按鈕時(shí)將退出播放
退出播放時(shí)，我們需要做相應(yīng)的處理。TBS 有提供相應(yīng)的事件，不過(guò)不同的版本有一點(diǎn)差異

TBS < 036849 036849 <= TBS < 036900 036900 <= TBS 是否支持同層播放器 否 是 是 退出全屏播放時(shí)觸發(fā) x5videoenterfullscreen x5videoexitfullscreen 進(jìn)入全屏播放時(shí)觸發(fā) x5videoexitfullscreen x5videoenterfullscreen 通過(guò)監(jiān)聽(tīng)這兩個(gè)事件就可以知道當(dāng)前的播放狀態(tài)document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){alert("exit fullscreen") })document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){alert("enter fullscreen") })

在對(duì)話框中發(fā)送 //gettbs 可以查看相關(guān)信息，tbsCoreVersion 就是當(dāng)前安裝的 TBS 內(nèi)核版本。

補(bǔ)充資料：
H5視頻播放優(yōu)化：
http://www.xuanfengge.com/htm...
videoAPI：
http://www.w3school.com.cn/ta...

總結(jié)

以上是生活随笔為你收集整理的H5实例教学--微信内嵌视频1（案例浅析）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。