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的十六...