h5的video標籤的用法及問題

2021-10-25 22:16:13 字數 2201 閱讀 2050

video標籤在相容性上還是比較差的,如果要在頁面中使用video標籤,需要考慮三種情況,支援ogg theora或者vp8的(opera、mozilla、chrome),支援h.264的(safari、ie 9、chrome),都不支援的(ie6、7、8)。但是由於h5在移動裝置上展現,基本都是使用webkit核心,只需要考慮android、ios裝置上的差異。

video標籤有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性, 以及乙個內部使用的標籤。

就是**檔案的url,不用這個標籤也可以使用內部標籤,但是個人覺得用src好看些~同樣各個瀏覽器對**檔案的格式有要求,就支援3種格式ogg、mp4、webm,相容性如下

格式   ie   firefox   opera   chrome   safari

ogg   no   3.5+    10.5+   5.0+     no

mpeg4 9.0+   no      no    5.0+     3.0+

webm no    4.0+    10.6+   6.0+     no

none:不進行預載入;

metadata:部分預載入(包括尺寸,第一幀,曲目列表,持續時間等等);

auto:全部預載入;

6、controls

7、width、height

寬度、高度

var video = document.getelementbyid(「video」);

1、屬性和方法

a、錯誤

video.error; //null:正常

video.error.code; //返回錯誤編碼 1.使用者終止   2.網路錯誤   3.解碼錯誤   4.url無效

b、網路狀態

video.currentsrc; //返回當前資源的url

video.src = value; //返回或設定當前資源的url

video.buffered; //返回已緩衝區域

video.preload; //返回預載入資訊  none:不預載   metadata:預載資源資訊   auto:

video.starttime; //一般為0,如果為流**或者不從0開始的資源,則不為0

video.duration; //當前資源長度 流返回無限

video.paused; //是否暫停

video.defaultplaybackrate = value;//預設的回放速度,可以設定

video.ended; //是否結束

video.pause(); //暫停

video.controls;//是否有預設控制條

video.volume = value; //音量

video.muted = value; //靜音

2、事件

video.addeventlistener(「***」 , function())

***是事件型別

loadstart //客戶端開始請求資料

progress //客戶端正在請求資料

loadstart //客戶端開始請求資料

error //請求資料時遇到錯誤

stalled //網速失速

pause//pause()觸發

loadedmetadata //成功獲取資源長度

waiting//等待資料,並非錯誤

playing//開始回放

seeking //尋找中

seeked//尋找完畢

durationchange //資源長度改變

volumechange //音量改變

三、開發中遇到的坑

http頭的range、content-range表示http斷點續傳

range

用於請求頭中,指定第乙個位元組的位置和最後乙個位元組的位置,一般格式:

range:(unit=first byte pos)-[last byte pos]

content-range

用於響應頭,指定整個實體中的一部分的插入位置,他也指示了整個實體的長度。在伺服器向客戶返回乙個部分響應,它必須描述響應覆蓋的範圍和整個實體長度。一般格式:

content-range: bytes (unit first byte pos) - [last byte pos]/[entity legth]

在html檔案head標籤中加入上述js**

關於H5中的video標籤的用法總結

video標籤的使用 1 src屬性和poster屬性 videowidth 658 height 444 src poster autoplay autoplay 2 preload屬性 videowidth 658 height 444 src poster autoplay autoplay ...

解決h5中video標籤返回流無法快進和後退的問題

記錄檔案大小 long pastlength 0 int rangeswitch 0 long contentlength 0 客戶端請求的位元組總量 string rangebytes 記錄客戶端傳來的形如 bytes 27000 或者 bytes 27000 39000 的內容 randomac...

H5常用的標籤元素

常用html標籤元素結合及簡介 建立乙個html文件 設定文件標題和其它在網頁中不顯示的資訊 設定文件的標題 最大的標題 預先格式化文字 下劃線黑體字 斜體字 打字機風格的字型 引用,通常是斜體 強調文字 通常是斜體加黑體 加重文字 通常是斜體加黑體 設定字型大小從1到7,顏色使用名字或rgb的十六...