視訊作為淘寶教育業務的基礎服務，本文根據自身在手淘中視訊播放的實踐，談談在手淘中視訊播放遇到的問題及其解決方案。
在手淘過去一年多的曆史長河中存在五種類型的播放器。
原生 html5 video 标簽
android 5.3.2 版本之後的 uc 核心增強 sac 播放器
android 5.4.9 版本之後的 uc hac 播放器
android 5.3.2 版本之前的 glue native 播放器
android 5.3.2 版本及其之後的 playbuddy 播放器
下面從支援平台，loading 動畫，全屏，模拟全屏和相容性五個方面對各個播放器做個橫向對比。
接口與事件封裝
上面介紹了手淘中可供 webview 選擇的播放器，對于業務方而言迫切需要一個解決方，無需關心底層差異。為此，我們屏蔽移動端不同系統平台、宿主環境、播放器的實作細節和相容性問題，提供統一的接口和事件，具體如下：
方法
play 播放
pause 暫停
stop 停止
show 顯示
hide 隐藏
requestfullscreen 全屏
exitfullscreen 退出全屏
getcurrenttime 擷取目前播放時間
setcurrenttime 設定播放時間
getduration 擷取視訊時長
setposter 設定背景圖
destory 銷毀
reset 重置視訊
事件
timeupdate 進度更新
ended 停止
error 錯誤
play （專指video）
pause 停止（專指video）
firstpaint 視訊真正開始播放（專指video）
controls 播放控件（專指video）
播放
暫停
進度更新
全屏
loading
接下來談談在開發過程中遇到的各種小問題及其解決辦法。
webview 中，可以對 uiwebview 做如下配置，并且在 video 中配置 webkit-playsinline 屬性即可：
自定義播放控件
部分 android 機型不支援内置控件，或者說内置控件無法正常使用；各個産品都有特定的視覺規範，預設控件的互動和視覺無法滿足需求。是以，我們推薦預設不啟用預設控件，采用自定義控件。
ios 下播放時還可能還展示系統自帶播放按鈕，可以配置如下 css。
poster 視訊底圖
在 iphone 中視訊加載完第一幀資料後會覆寫 poster 底圖展示第一幀畫面，這時可以使用 div 覆寫在視訊上方模拟，監聽 timeupdate 事件做隐藏操作。
在 uc webview 中動态設定 poster 可能會導緻手淘 crash，方案跟上方一樣。
在使用 native 播放器時，在播放器未初始化時使用 div 替換 video 标簽，并設定底圖為背景圖。
播放首屏：ios 通過監聽 playing 事件可以準确擷取視訊播放的時間點；android 中在該事件觸發時，還沒真正開始播放。我們通過監聽 timeupdate 的事件做模拟處理。
視訊切換：在android 4.4 以下版本，在視訊切換時存在第一次切換不能正常播放，第二次才能正常播放情況。通過調試人肉分析，發現切換視訊的 video 存在以下兩個特征：readystate 值為 0，videowidth 為 0。是以我們判斷當兩個屬性為0時，則切換失敗，再次調用播放邏輯。存在誤判的可能，但是能保證正常工作。
全屏：手淘 ios 支援豎全屏效果，android 雖然具有全屏方法，但是被手淘限制，調用全屏方法無效。
<code>方案一</code>：為了支援橫全屏，我們使用 css3 的 rotate 對視訊區域進行90度旋轉，并且調用 bridge 接口隐藏 native 頂部的 navibar，并對自定義控件進行響應優化調整。基本到達 native全屏效果。當然頂部狀态欄不能隐藏還是有些小瑕疵。同時旋轉之後元素的 z-index失效，導緻視訊覆寫控件問題，可以通過設定 -webkit-transform: translate3d(0,0,0) 來修複
效果圖:
預覽位址（請用手淘掃碼）：
<code>方案二</code>。方案一隻是模拟了橫全屏效果，對于追求完美的處女座不能忍。還有其他方案嗎？有時候隻需要轉換下思維，問題即可迎刃而解。既然是橫屏播放，隻需要讓 webview 橫屏即可，同時在橫屏之後重新調整控件即可，關鍵手淘提供了打開應用橫全屏的接口。注意點：橫屏之後需要禁止頁面滾動，要不然全屏就露餡了，因為本質還是個 webview。
demo：
手淘 ios 掃碼：
<code>方案3</code>。在 uc hac 方案視訊提供全屏接口 ucsettings.setvideoviewfullscreenbydefault（true），開啟後，視訊全屏預設為橫屏
自動播放
出于使用者節省使用者流量考慮，iphone 下播放視訊需要使用者手動觸發，即使配置了 autoplay 屬性也是無效的。在業務中，特定場景還是需要視訊能夠自動播放，對此我們可以監聽頁面的 touchstart 事件，做如下處理：
其他
部分機型手淘低版本使用 video 播放時，會出現有聲音沒畫面的問題，更新手淘後即恢複。例如，小米4 手淘 4.2.0
ios 5.1 和部分 android 手機暫停和開始按鈕不觸發點選事件(元素的 :after 為iconfont)。通過父元素添加background即可
android uc 核心的播放器，在未設定 source 資源時，設定 poster 無效
android uc 核心的播放器無法自定義控件和樣式操作，但是可以正常的監聽事件。
直接替換 source 不會改變目前正在播放的視訊，需要調用 load 方法。
uc 浏覽器中 video 标簽會被 uc 的播放器插件替換
使用 m3u8 和 mp4 基本可以相容所有機型
在 ios 視訊初始化後設定 currrenttime 無效，在 loadedmetadata 事件觸發後，設定 currenttime 即可。
destroy：
glue：glue native 播放器在頁面跳轉，webview 後退等操作時，不會自動析構，好的情況是視訊依然在背後播放，有時候會直接導緻手淘 crash。
playbuddy：在頁面跳轉時依然會繼續播放
處理方式：頁面跳轉時需要手動的銷毀native播放器。
定位
glue 播放器使用 dip 作為播放器的定位機關，rem 布局會對頁面進行縮放，導緻定位位置和視訊大小錯誤。同時定位時參數有小數點會導緻播放器錯誤。
視訊源位址：glue 播放器不支援以 // 開始的視訊資源，例如 //video.xxx
playbuddy 播放器不會随着頁面滾動而滾動。
如果業務中需要在手淘中播放視訊，ios 直接使用原生 video 即可。在 android 中較為複雜，沒有完全相容的方案。建議使用 video，對于 android 低版本建議使用native 播放器。随着uc核心接入，未來完全抛棄 native 方案也是可行的。
本文基于過去一年在手淘視訊播放過程中遇到問題的小結，後續會整理視訊監控和視訊娛樂化相關内容。
品牌
機型
手淘版本
作業系統版本
播放器控件
視訊清單切換
試看控制
觀看進度同步
切換模式
問題
蘋果
6 plus
5.2.7
8.11
√
*
6
5s
5
4s
4
nexus 5
yun os 3
×
安卓 5
三星
n7100
4.9
note4
模式二點最大化crash
note3
s4
5.2.7.3
模式二，播放有問題
i9300
4.3
s3
5.2.8.2
s5
魅族
mx2
mx4 pro
魅藍note
mx3（安裝不上）
華為
榮耀6
模式二可能播放不了
mate7
c8816
進度條拖動會跳
榮耀3c
4.4.2
×一直展示loading的圖檔
模式二播放不了
c8813
4.1.1
高清視訊不能播放
htc
max
816w
vivo
find5
x3
4.2.2
小米
2s
高清的播放不了
3
4.4.4
索尼
m512
xperia 36l
4.1.2
nubia
nx403
模式一，模式二播放均有問題
錘子
oppo
x907
4.0.3
很難點到
nexus5
第二種模式crash
轉載自：http://taobaofed.org/blog/2016/05/03/promise-anti-patterns/
作者：永霸