隱藏原生html5 video controls

隱藏原生html5 video controls

鳳凰視頻焦點項目mobile html5播放器測試時bug,因爲沒有用原生的controls而是本身寫的custom controls,雖然設置了controls的值爲false,但實際狀況是好比暫停仍是存在,致使與custom的重疊. 協助同事解決這個bug時還好找到了這篇文章(有空完整翻譯下.=.=)
Hiding Native HTML5 Video Controls in Full-Screen Mode
------------------------------
吶,解決辦法就是

video::-webkit-media-controls {
  display:none !important;
}

沒錯css,知道真相後淚流不止啊.這麼設置後即便沒有設置controls爲false，native controls也不會再出現了.

參考
html5 video api
video屬性及方法列表