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

_Zhao 發(fā)布于2019-06-21 16:15 / 2018人閱讀

摘要：然而我真的太天真，微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊，需求很簡單自動播放全屏不顯示工具條自動播放一步步來，自動播放這個問題在十分肯定默認是不支持的，必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。

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

就是圖片滾動到最后自動播放視頻，播完顯示個按鈕交互。

然而我真的太天真，微信瀏覽器怎樣會讓你這樣好過！

問題集中于自動播放視頻這塊，需求很簡單：

自動播放

全屏

不顯示工具條

自動播放

一步步來，自動播放這個問題在ios十分肯定默認是不支持的，必須基于用戶操作下才能加載視頻。至于android在微信下和ios一個樣。這個問題其實還不算大，有解決方案：

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

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

代碼思維很簡單就是用戶頁面肯定會點的，就第一下點擊播放視頻，這樣算作用戶行為而視頻實際還沒播放，之后在其他需要的地方再彈出播放。從設計上需要花點心思來解決這個硬骨頭...

全屏 and 不顯示工具條

如果你只需要自動播放，那可以停下了，因為下面更坑。

全屏播放so easy！！

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

然而在ios設備，還得加上iphone-inline-video這個插件，解決不強制全屏播放問題。以下是使用方法：

# 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"會讓視頻進入全屏模式，而全屏默認不顯示工具條，好解決！:)

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

中間有段小插曲本打算使用canvas進行視頻渲染，看似可行結果pc端可以，移動端跪地不起。

結論：

自動播放 —— 完全可行

全屏 —— 可行但需考慮設計細節(jié)

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

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

云服務器 GPU云服務器云服務器那些事什么事web前端開發(fā) 視頻的播放前端技術主要有那些

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11032.html

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

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

SexySix 2019-08-19 18:07 評論0 收藏0
前端臨床手札——單元測試

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

kid143 2019-08-19 18:17 評論0 收藏0
前端臨床手札——單元測試

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

godlong_X 2019-05-29 16:57 評論0 收藏0
前端臨床手札——webpack構建逐步解構（上）

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

lowett 2019-08-22 10:36 評論0 收藏0