NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

image.png

小示例程式碼地址:https://github.com/danhuan/video-demo
IE8、火狐、谷歌測試通過。

使用需要注意的問題:

1.多種格式視訊

不可以只有MP4格式,一定要引入Ogg格式視訊,否則在火狐上會不相容報錯。
推薦個不錯的視訊格式轉換器,下載地址 :http://download.csdn.net/detail/danhuan/9905942

2.引入html5media.js

引入html5media.js,可以使相容IE

3.如果想要設定視訊寬度為百分比%自適應佔滿容器,注意 video的屬性width不可以為百分比%

注意 不可以 直接在<video> 標籤裡面加width = “100%”,因為的屬性width只支援畫素值,不支援百分比。雖然<video width = "100%"> 在谷歌火狐瀏覽器中可以正確顯示,但是在IE中會不相容,導致無法播放視訊。
如果想要設定視訊寬度為百分比%自適應佔滿容器,可以 通過內部樣式<style>...</style>或外部樣式<link rel="stylesheet" href="CSS檔案路徑" />設定,但 不可以 通過內聯樣式style="width:100%" 設定樣式,否則不相容IE。

4.如果視訊是固定寬高,則可以直接在屬性中設定,千萬注意不要加單位px,否則IE不相容。

正確示例如下:

<video width="1000" height="500" controls autoplay="true" loop="true" preload="auto">

錯誤示例如下:

<video width="1000px" height="500px" controls autoplay="true" loop="true" preload="auto">

image.png

相關文章

程式語言 最新文章