html5的video元素學習手札

2022-08-05 14:36:13 字數 1359 閱讀 8191

標籤嵌入到html文件中

初始化標籤時主要設定的屬性

preload:該列舉屬性旨在告訴瀏覽器作者認為達到最佳的使用者體驗的方式是什麼。可能是下列值之一:

空字串:也就代指 auto 值

buffered:這個屬性可以讀取到哪段時間範圍內的**被快取了。該屬性包含了一個 timeranges 物件

crossorigin:該列舉屬性指明抓取相關是否必須用到cors(跨域資源共享)。 支援cors的資源 可在元素中被重用,而不會被汙染。允許的值如下:

事件互動中主要使用的屬性

還有更多事件api,這裡只列舉了試過的

timeupdate:元素的 currenttime 屬性表示的時間已經改變

seeking: 在跳躍操作開始時觸發

seeked:在跳躍操作完成時觸發

loadeddata: **的第一幀已經載入完畢

快進/快退:jump:1(快進)2(快退)

具體場景是移動端瀏覽器切換tab導致的隱藏和使用者按home鍵退出瀏覽器

html5 提供了 page visibility api 來支援監聽tab切換,與之對應新增了

visibilitychange事件的具體使用

var hidden;

var visibilitychange;

if (typeof document.hidden !== 'undefined') else if (typeof document.mozhidden !== 'undefined') else if (typeof document.mshidden !== 'undefined') else if (typeof document.webkithidden !== 'undefined')

document.addeventlistener(visibilitychange, function ()

}, false);

關於 visibilitychange 事件的相容性,測試了兩部手機,華為mt7 和 iphone6 ,相容情況如下

華為mt7

iphone6

頁面重新整理和瀏覽器tab被關閉的時候會觸發 window.onunload ,也可以做為補充場景

ios 下uc瀏覽器和 android 下的一些瀏覽器不會觸發 seeking 和 seeked ,因此需要在 timeupdate 裡來分析猜測使用者行為

欲先善其事必先利其器,遇到沒搞過的技術,一定要先測試一遍 api ,不然太浪費時間,學習內容**

**相關事件

希望能多提寶貴建議,幫助筆者繼續優化

html5學習 video

格式ie firefox opera chrome safari oggno 3 5 10 5 5 0 nompeg 4 9 0 nono...

HTML5 Audio Video 方法

方法 描述addtexttrack canplaytype load play pause 屬性描述 audiotracks 返回表示可用音軌的 audiotracklist 物件 autoplay buffered controller controls crossorigin currentsr...

html5 Canvas元素

文字物件 context 物件屬性 fillstyle strokestyle 字型顏色設定fillstyle屬性可以是css顏色,漸變,或圖案。fillstyle 預設設定是黑色。 font 字型風格 context 物件方法 filltext str width height stroketex...