摘要:但好在中,新增了屬性,可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補充資料視頻播放優(yōu)化
以上為案例二維碼
首個H5案例解析
從頭開始分析
在 iOS 上,APP 都是使用的系統(tǒng)自帶的瀏覽器進行頁面渲染,video 播放視頻的效果是統(tǒng)一的,只需要考慮不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放視頻默認會彈出一個播放器全屏播放視頻,如下效果
播放器上下有的系統(tǒng)默認的控制欄,可以控制視頻的播放進度、音量以及暫?;蚶^續(xù)播放,播放視頻時,視頻會 “浮” 在頁面上,頁面上的所有元素都只能是在視頻下面,這種效果顯然不是我們想要的。
但好在 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.
來源: http://www.cnblogs.com/zzsdre...
安卓實現(xiàn):
TBS 內(nèi)核(>=036849)支持一個叫 同層播放器 的視頻播放器,這個不需要申請白名單,只需給 video 設(shè)置兩個屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true",播放效果
結(jié)合IOS和安卓微信下同層播放器的實現(xiàn)代碼:
稍微講一下video的事件
此案例并沒有使用timeupdate時間來實現(xiàn)播放進度的監(jiān)聽
在此案例中
要實現(xiàn)第一段視頻播放完,出現(xiàn)選項給用戶進行視頻的選擇交互。
我們需要在出現(xiàn)選項時將視屏?xí)和#?br>先來看下代碼:
function getTime(obj){ obj.timer = setInterval(function(){ var t = obj.currentTime; if(isAndroid) { // 選項出現(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à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); } } // 項鏈播放,提前呼出點擊按鈕 if(t > 172) { // aLink.style.display = "block"; // window.location.; } },20); } /** * 視頻開始play */ video.addEventListener("play", function(){ // ovstatus = 1; console.log("play") getTime(this); }, false);
該案例使用了定時器,在視頻開始事件觸發(fā)時開始每20ms觸發(fā)一次,判斷當(dāng)前視頻進度,若到達需停止的進度時(第一段片段播放完畢,或選項片段結(jié)束時),暫停視頻,并出現(xiàn)浮層div塊,為用戶提供交互。
點擊選項后跳到對應(yīng)的進度,繼續(xù)播放視頻。以上為該案例主要需要解決的問題。
安卓瀏覽器左上角會出現(xiàn)推出播放的返回按鈕,當(dāng)點擊按鈕時將退出播放
退出播放時,我們需要做相應(yīng)的處理。TBS 有提供相應(yīng)的事件,不過不同的版本有一點差異
TBS < 036849 036849 <= TBS < 036900 036900 <= TBS 是否支持同層播放器 否 是 是 退出全屏播放時觸發(fā) x5videoenterfullscreen x5videoexitfullscreen 進入全屏播放時觸發(fā) x5videoexitfullscreen x5videoenterfullscreen 通過監(jiān)聽這兩個事件就可以知道當(dāng)前的播放狀態(tài) document.getElementById("video").addEventListener("x5videoexitfullscreen", function(){ alert("exit fullscreen") }) document.getElementById("video").addEventListener("x5videoenterfullscreen", function(){ alert("enter fullscreen") })
在對話框中發(fā)送 //gettbs 可以查看相關(guān)信息,tbsCoreVersion 就是當(dāng)前安裝的 TBS 內(nèi)核版本。
補充資料:
H5視頻播放優(yōu)化:
http://www.xuanfengge.com/htm...
videoAPI:
http://www.w3school.com.cn/ta...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50473.html
摘要:但好在中,新增了屬性,可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上,APP 都是使用的系統(tǒng)自帶的瀏覽器進行頁面渲染,video 播放視頻的效果是統(tǒng)一的,只需要考慮不同的 iOS ...
摘要:說明在以下開始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實例時,此代碼將執(zhí)行。開始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標。 結(jié)合之前的兩篇解析 微信內(nèi)嵌視頻1(案例淺析)https://segmentfault.com/a/11...從AnimateCC到CreateJS入門https://segmentfault.com/a/11... 這次是一篇creat...
摘要:說明在以下開始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實例時,此代碼將執(zhí)行。開始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標。 結(jié)合之前的兩篇解析 微信內(nèi)嵌視頻1(案例淺析)https://segmentfault.com/a/11...從AnimateCC到CreateJS入門https://segmentfault.com/a/11... 這次是一篇creat...
閱讀 2470·2021-11-17 09:33
閱讀 757·2021-11-04 16:13
閱讀 1329·2021-10-14 09:50
閱讀 691·2019-08-30 15:53
閱讀 3657·2019-08-30 14:18
閱讀 3268·2019-08-30 14:14
閱讀 2093·2019-08-30 12:46
閱讀 3178·2019-08-26 14:05