h5video標籤

 

在video標籤中，咱們能夠使用屬性：videoWidth & videoHeight，它獲取的是video的寬度和高度（媒體自己）。
雖然不能直接使用，可是能夠經過計算寬高比獲得 video 佔用的寬度和高度。
好比讓 video 佔滿寬度爲480px的容器，能夠根據寬高比獲得此時video佔用的高度。

重要：

• h5的video標籤，修改source的src地址，必須採用動態插入source元素的形式，不然瀏覽器不會從新請求播放資源。

通常作法：

• 不要本身加暫停時視頻中間的繼續播放按鈕，要使用瀏覽器默認的。
• 暫停時，頁面顯示浮層，使用pause事件添加。

介紹連接：http://zhaoda.net/2014/10/30/html5-video-optimization/

播放控制按鈕的顯示和隱藏：
css：controls="controls"
js: document.getElementById('video1').controls = true 或 false

問題：在iframe中不能全屏播放視頻
解決：將iframe修改爲

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

播放視頻時相關控制按鈕的css類（支持基於webkit內核的Chrome瀏覽器）：
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

video標籤在各手機瀏覽器的兼容性：

瀏覽器	暫停時視頻中間是否有繼續播放圖標	是否能在頁面加浮層
chrome	有	能
firefox	沒有	能
qq瀏覽器	有	不能
360瀏覽器	有	能
UC瀏覽器	有	不能
safari	沒有	能