成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端臨床手札——在微信播放視頻的那些事

_Zhao / 2029人閱讀

摘要：然而我真的太天真，微信瀏覽器怎樣會(huì)讓你這樣好過(guò)問(wèn)題集中于自動(dòng)播放視頻這塊，需求很簡(jiǎn)單自動(dòng)播放全屏不顯示工具條自動(dòng)播放一步步來(lái)，自動(dòng)播放這個(gè)問(wèn)題在十分肯定默認(rèn)是不支持的，必須基于用戶(hù)操作下才能加載視頻。至于在微信下和一個(gè)樣。

某天收到舊同事的信息說(shuō)希望我?guī)褪肿鲆幌乱粋€(gè)簡(jiǎn)單的H5，然后我看了看的確很簡(jiǎn)單：

就是圖片滾動(dòng)到最后自動(dòng)播放視頻，播完顯示個(gè)按鈕交互。

然而我真的太天真，微信瀏覽器怎樣會(huì)讓你這樣好過(guò)！

問(wèn)題集中于自動(dòng)播放視頻這塊，需求很簡(jiǎn)單：

自動(dòng)播放

全屏

不顯示工具條

自動(dòng)播放

一步步來(lái)，自動(dòng)播放這個(gè)問(wèn)題在ios十分肯定默認(rèn)是不支持的，必須基于用戶(hù)操作下才能加載視頻。至于android在微信下和ios一個(gè)樣。這個(gè)問(wèn)題其實(shí)還不算大，有解決方案：

// 點(diǎn)擊頁(yè)面開(kāi)始偷偷播視頻讓其加載
var one = document.body.addEventListener("touchstart", function(){
    var _video = document.querySelector("#vidoe");
    _video.play();
    _video.pause();
    document.body.removeEventListener("touchstart", one);
}, false);

// 然后在其他事件或者行為就能播放那個(gè)視頻了
var _video = document.querySelector("#vidoe");
_video.play();

代碼思維很簡(jiǎn)單就是用戶(hù)頁(yè)面肯定會(huì)點(diǎn)的，就第一下點(diǎn)擊播放視頻，這樣算作用戶(hù)行為而視頻實(shí)際還沒(méi)播放，之后在其他需要的地方再?gòu)棾霾シ?。從設(shè)計(jì)上需要花點(diǎn)心思來(lái)解決這個(gè)硬骨頭...

全屏 and 不顯示工具條

如果你只需要自動(dòng)播放，那可以停下了，因?yàn)橄旅娓印?/p>

全屏播放so easy??！

加上x5-video-player-type="h5"讓video開(kāi)啟同層H5播放器。

然而在ios設(shè)備，還得加上iphone-inline-video這個(gè)插件，解決不強(qiáng)制全屏播放問(wèn)題。以下是使用方法：

# main.js
var enableInlineVideo = require("iphone-inline-video");
enableInlineVideo(document.querySelector("#video"));

# index.html


# index.css
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

最后加上x5-video-player-fullscreen="true"會(huì)讓視頻進(jìn)入全屏模式，而全屏默認(rèn)不顯示工具條，好解決！:)

注意：如果和自動(dòng)播放的方案一起用會(huì)出現(xiàn)：偷跑視頻時(shí)黑屏閃爍一下的問(wèn)題（就是視頻全屏了一下...）。然而打算加載后再設(shè)置上面屬性也會(huì)不成功的，會(huì)存在視頻流錯(cuò)亂問(wèn)題（提示你加載出錯(cuò)之類(lèi)的...）

中間有段小插曲本打算使用canvas進(jìn)行視頻渲染，看似可行結(jié)果pc端可以，移動(dòng)端跪地不起。

結(jié)論：

自動(dòng)播放 —— 完全可行

全屏 —— 可行但需考慮設(shè)計(jì)細(xì)節(jié)

不顯示工具條 —— 別想了，吃力不討好（然而目前還沒(méi)有解決方案，如果有請(qǐng)通知博主感謝）

想要模仿的例子(請(qǐng)用微信打開(kāi))
視頻H5のVideo標(biāo)簽在微信里的坑和技巧
關(guān)于如何在微信里面讓video不全屏播放。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/11032.html

相關(guān)文章

  • 前端臨床手札——文件上傳

    摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類(lèi)型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說(shuō)上傳這步估計(jì)是簡(jiǎn)單易入門(mén)，但是實(shí)際工作時(shí)就會(huì)發(fā)現(xiàn)上傳文件這個(gè)功能上是簡(jiǎn)單的，邏輯上卻比較復(fù)雜。 先說(shuō)一下需求和功能點(diǎn)： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...

    SexySix 評(píng)論0 收藏0

  • 前端臨床手札——單元測(cè)試

    摘要：感覺(jué)不能這樣下去就學(xué)寫(xiě)一下單元測(cè)試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。具體執(zhí)行的測(cè)試用例實(shí)現(xiàn)代碼。測(cè)試工具斷言庫(kù)測(cè)試驅(qū)動(dòng)開(kāi)發(fā)及測(cè)試框架入門(mén)學(xué)習(xí) 最近博主工作是和另一枚后端合作，但是經(jīng)常發(fā)現(xiàn)他寫(xiě)的接口出錯(cuò)，苦逼連連。感覺(jué)不能這樣下去就學(xué)寫(xiě)一下單元測(cè)試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。 經(jīng)過(guò)博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡(jiǎn)...

    kid143 評(píng)論0 收藏0

  • 前端臨床手札——單元測(cè)試

    摘要：感覺(jué)不能這樣下去就學(xué)寫(xiě)一下單元測(cè)試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。具體執(zhí)行的測(cè)試用例實(shí)現(xiàn)代碼。測(cè)試工具斷言庫(kù)測(cè)試驅(qū)動(dòng)開(kāi)發(fā)及測(cè)試框架入門(mén)學(xué)習(xí) 最近博主工作是和另一枚后端合作，但是經(jīng)常發(fā)現(xiàn)他寫(xiě)的接口出錯(cuò)，苦逼連連。感覺(jué)不能這樣下去就學(xué)寫(xiě)一下單元測(cè)試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。 經(jīng)過(guò)博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡(jiǎn)...

    godlong_X 評(píng)論0 收藏0

  • 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上）

    摘要：前言由于博主最近又閑下來(lái)了，之前覺(jué)得的官方文檔比較難啃一直放到現(xiàn)在。文章會(huì)逐步分析每個(gè)處理的用意當(dāng)然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會(huì)補(bǔ)上構(gòu)建生產(chǎn)的配置分析，案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來(lái)了，之前覺(jué)得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個(gè)webpack配置案例后覺(jué)得還是得自己寫(xiě)個(gè)手腳架，當(dāng)然這個(gè)案例是基于vue的，...

    lowett 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<