html5的video元素學習手札

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

標籤嵌入到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標籤

慣例 我是溫浩然 您的瀏覽器不支援 video 標籤。親自試一試 iefirefox chrome safari opera internet explorer 9 firefox,opera,chrome 以及 safari 支援 標籤。注釋 internet explorer 8 以及更早的版本...

html5標籤video 筆記一

摘要 網上的教程其實也不少了 w3cschool裡面的最為簡單而詳細,那麼這幾介紹的是一些更為直接的應用。本文目錄 使用標籤 加上一些必要引數 第一步 使用標籤 使用的方法很簡單,就是一句 video video video controls src video video controls aut...

html5標籤video 筆記二

摘要 獲取影片總時長 音量的獲取和設定 第一 獲取影片總時長 videoid myvideo controls preload auto width 300 height 165 poster src video 設定乙個id後,那麼就可以開始操作了,要獲取總時長,要用到video的乙個事件 loa...