最新辦法 請移步 http://www.cnblogs.com/luoeeyang/p/7524824.html
首先你需要知道以下內容:
http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93
這是微信為廣告商開放的API,我一直認為只有在微信投廣告才能正常使用。
但是就在剛剛我嘗試了一下,直接調用也是可以的(而且沒有廣告,至少目前是這樣)
我們這里用到了微信提供的視頻接口 :(點擊上面的鏈接,速去查看)
這樣就能解決Android微信 HTML中video會被使用特殊播放器來播放的問題。
因為:
我們直接在HTML中使用video來插入視頻,在Android微信下會使用特殊的播放組件來播放,而這個組件是脫離HTML的。(這也是我們頭大的地方)
微信給的解釋是,因為直接插入的video編碼、格式存在多樣性,微信為了保證視頻的正常播放,而使用了一個專用的萬能視頻播放器來播放。
而本文中的解決辦法為什么就不會使用這個播放器來播放呢?
因為上傳到騰訊視頻的視頻都會被騰訊二次編碼,這樣視頻的編碼就被統一了,所以微信放心大膽的吧視頻交給HTML5的video來播放了。
這樣的最大好處就是不會脫離HTML,讓我們可以在視頻層之上完成我們想要的東西。
但是這樣雖然解決了播放“層”的問題,不過卻有個新“BUG”。就是它:
相信聰明了你已經想到 直接把這個視頻DIV的top 給遮住就能解決了。
更聰明的你也會想到,我們原始視頻需要把頂部多流出空白,這樣才不會遮住logo的時候把我們的視頻也給遮住了。
當然還有朋友說依然會有控制條,你也可以用同樣的方式來處理。
到此我們初步解決了微信HTML5播放視頻的一個頭疼問題。那么剩下五彩繽紛的交互就交給大家去發揮了。
測試通過環境:
IOS 9.3.3 iPhone 6plus wechat 6.3.23
IOS 9.3.4 iPhone 5 wechat 6.3.23
IOS 8.4.1 iPhone 5 wechat 6.3.23
Android 6.0.1 xiaomi 4 wechat 6.3.23
Android 4.3 sumsung I9300 wechat 6.3.22
未通過環境
IOS 9.3.4 iPhone 5s wechat 6.3.23 (自動系統全屏,這台機器好像一直有問題)
Android 4.4.2 huawei P7-L07 wechat 6.3.22 調用了特殊播放器
Android 4.4.4 xiaomi 3 wechat 6.3.22 自動全屏