您現在的位置是:電腦技術吧?>? 編程技術 ??>??標簽的屬性有哪些,標簽的屬性??>??正文詳情

標簽的屬性有哪些,標簽的屬性

晏驪美2019-11-25 08:33:45 人圍觀
簡介a標簽href屬性介紹了一種基于HTML5 video的視頻播放器。一開始我不知道,后來我可以寫一個基本上完美的自定義播放器。在這個過程中,我們對視頻標簽的屬性、方法和事件有了全a標簽常

HTML5 Video標簽的屬性、方法和事件匯總介紹前段時間寫了一個基于html5 video的視頻播放器,從起初的對其不了解,然后到能夠寫一個基本完善的自定義播放器。

在這個過程中,對video標簽的屬性,方法,事件有了個全面的認識。

下面分類列出來一下。

video標簽的屬性代碼如下:src :視頻的屬性poster:視頻封面,沒有播放時顯示的圖片preload:預加載autoplay:自動播放loop:循環播放controls:瀏覽器自帶的控制條width:視頻寬度height:視頻高度html 代碼代碼如下:video id=media src=http://www.jb51.net/test.mp4 controls width=400px heigt=400px/video //audio和video都可以通過JS獲取對象,JS通過id獲取video和audio的對象獲取video對象代碼如下:Media = document.getElementById(media); Media方法和屬性:HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement代碼如下:Media.error; //null:正常Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效strong//網絡狀態/strong - Media.currentSrc; //返回當前資源的URL- Media.src = value; //返回或設置當前資源的URL- Media.canPlayType(type); //是否能播放某種格式的資源- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源- Media.load(); //重新加載src指定的資源- Media.buffered; //返回已緩沖區域,TimeRanges- Media.preload; //none:不預載 metadata:預載資源信息 auto:/p pstrong//準備狀態/strong - Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA- Media.seeking; //是否正在seeking/p pstrong//回放狀態/strong/p pMedia.currentTime = value; //當前播放的位置,賦值可改變位置Media.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0Media.duration; //當前資源長度 流返回無限Media.paused; //是否暫停Media.defaultPlaybackRate = value;//默認的回放速度,可以設置Media.playbackRate = value;//當前播放速度,設置后馬上改變Media.played; //返回已經播放的區域,TimeRanges,關于此對象見下文Media.seekable; //返回可以seek的區域 TimeRangesMedia.ended; //是否結束Media.autoPlay; //是否自動播放Media.loop; //是否循環播放Media.play(); //播放Media.pause(); //暫停strong//視頻控制/strong/p pMedia.controls;//是否有默認控制條Media.volume = value; //音量Media.muted = value; //靜音TimeRanges(區域)對象TimeRanges.length; //區域段數TimeRanges.start(index) //第index段區域的開始位置TimeRanges.end(index) //第index段區域的結束位置strong//相關事件/strong/p p var eventTester = function(e){Media.addEventListener(e,function(){console.log((new Date()).getTime(),e)},false);}eventTester(loadstart); //客戶端開始請求數據eventTester(progress); //客戶端正在請求數據eventTester(suspend); //延遲下載eventTester(abort); //客戶端主動終止下載(不是因為錯誤引起)eventTester(loadstart); //客戶端開始請求數據eventTester(progress); //客戶端正在請求數據eventTester(suspend); //延遲下載eventTester(abort); //客戶端主動終止下載(不是因為錯誤引起),eventTester(error); //請求數據時遇到錯誤eventTester(stalled); //網速失速eventTester(play); //play()和autoplay開始播放時觸發eventTester(pause); //pause()觸發eventTester(loadedmetadata); //成功獲取資源長度eventTester(loadeddata); //eventTester(waiting); //等待數據,并非錯誤eventTester(playing); //開始回放eventTester(canplay); //可以播放,但中途可能因為加載而暫停eventTester(canplaythrough); //可以播放,歌曲全部加載完畢eventTester(seeking); //尋找中eventTester(seeked); //尋找完畢eventTester(timeupdate); //播放時間改變eventTester(ended); //播放結束eventTester(ratechange); //播放速率改變eventTester(durationchange); //資源長度改變eventTester(volumechange); //音量改變

版權聲明:本文由 晏驪美 整理編輯。

原標題:a標簽的屬性,li標簽的屬性

轉載注明出處:http://www.dn9ww09s.icu/program/14255.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ios暗黑模式,ios暗黑模式怎么使用

    ios暗黑模式,ios暗黑模式怎么使用 相關圖片ios12.3暗黑模式怎么設置從2017年世界自然基金會會議開始已經有一段時間了。很多人最關心的是蘋果最新的系統IOS 11。其中,最受關注的是IOS 11的暗模式。那么IOS 11的黑暗模iphone暗黑模式...

  • 值得被記住的一天,一個值得記住的周末

    值得被記住的一天,一個值得記住的周末 相關圖片最值得記住的一句話本文主要介紹CSS中一些值得記憶的技巧。盡管本文中介紹的這些屬性在普通應用程序中并不常見,但它們非常有效。你可以參考盒子大小為朋友誰需要它。雖然CSS3中...

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立我相信所有的切手派對都期待著618的到來。作為年度推廣活動的開幕日,摩拜和京東聯合推出了618貼紙活動。接下來,超人軟件編輯就為大家介紹一下摩拜京東小金庫的活動摩...

  • 瀏覽器字體模糊,打開瀏覽器字體模糊

    瀏覽器字體模糊,打開瀏覽器字體模糊 相關圖片瀏覽器字體有重影最近,很多朋友都報告說他們的win10電腦的edge瀏覽器字體看起來很模糊。win10系統中邊緣瀏覽器的模糊字體呢?接下來,超人軟件將為您介紹win10系統瀏覽網頁字體模糊...

  • flash基礎教程新手入門,最基礎的flash入門教程

    flash基礎教程新手入門,最基礎的flash入門教程 相關圖片flash的教程當我們做動畫時,如果我們按照時間順序安排演員的表演,我們只依賴于回放頭在時間線上的位置。具體的情況是停止、廣播、在某一幀停止、在某一幀廣播,或者相對地說,...

  • 藍屏0x000000d1怎么辦,0x0000001e藍屏

    藍屏0x000000d1怎么辦,0x0000001e藍屏 相關圖片藍屏最近,許多合作伙伴報告說,他們的win10系統計算機在打開時的錯誤代碼為0x000000d1那么,當win10系統是藍屏并且提示錯誤代碼0x000000d1時,藍屏怎么辦...

  • 網頁設計,優秀網站網頁設計

    網頁設計,優秀網站網頁設計 相關圖片網頁設計排版有人曾經說過,如果你想知道一個網頁設計師是否專業,讓他設計一個黑色系的網站。事實上,大多數真正漂亮的黑色系網站都來自真正的專業設計師。黑色是一種經典的...

  • 資源管理器,資源管理器在哪里

    資源管理器,資源管理器在哪里 相關圖片資源管理器重啟最近,很多小伙伴都報告說,他們的電腦收藏夾無法擴展,即使恢復收藏夾也無法解決這個問題。win7資源管理器收藏夾呢接下來,超人軟件將引入win7資源管理怎么重啟資...

  • 隔空傳送找不到對方,為什么隔空傳送找不到別人

    隔空傳送找不到對方,為什么隔空傳送找不到別人 相關圖片隔空傳送在哪里打開近日,不少網友反映,在使用文件輕松傳輸功能時找不到該文件。如果win7找不到便于傳輸的文件怎么辦?接下來,超人軟件將向您介紹如果win7找不到便于傳輸的文件...

  • 環境什么,關于環境

    環境什么,關于環境 相關圖片我們與環境HTTP環境本身是一個無連接的體系結構。在這種體系結構中,服務器只能被動地接受客戶端的請求并返回結果,而不能主動地向客戶端發送數據。在許多需要實時數據交互的場...

熱評文章

  • 美圖秀秀彩虹,美圖秀秀彩虹在哪里

    美圖秀秀彩虹,美圖秀秀彩虹在哪里 相關圖片美圖秀秀里面的彩虹貼紙在哪彩虹魔筆是美容展中一個非常有趣的功能,用戶可以通過它為自己的圖片繪制獨特的圖案。那么美女秀彩虹魔筆在哪里呢?接下來,超人軟件編輯將為您介...

  • Http服務器,http服務器 web服務器

    Http服務器,http服務器 web服務器 相關圖片本服務器許多應用,如監控、即時通信、即時報價系統等,都需要將后臺的變化實時傳送給客戶端,而客戶端不需要不斷刷新和發送請求。本文首先介紹和比較了常用的服務器推送方案...

  • 陽光惠生活買手機靠譜嗎,陽光惠生活網絡無連接

    陽光惠生活買手機靠譜嗎,陽光惠生活網絡無連接 相關圖片陽光惠生活官網陽光生活是光大銀行推出的一款應用軟件。在這個軟件中,用戶可以得到許多實用的功能。那么什么是陽光生活?接下來,超人軟件編輯將為您帶來陽光生活的細節陽光...

  • 工作視圖,ppt2003有哪些工作視圖

    工作視圖,ppt2003有哪些工作視圖 相關圖片工作表的視圖模式包括Dreamweaver界面有大量的面板和工具箱,用戶可以自由配置,如下圖所示。具體的接口名稱將在后面的學習過程1中逐一介紹。Dreamweaver分別為程序猿和ug怎么重新生成...

  • 文件夾刪除不了怎么辦,如何刪除文件夾

    文件夾刪除不了怎么辦,如何刪除文件夾 相關圖片刪除文件夾命令我相信你們都遇到過這樣的情況。當您將計算機借給他人使用時,該文件夾已被他人誤刪除。win7如何創建其他人無法刪除的文件夾?接下來,超人軟件將介紹如何為您創...

  • win10有什么好用的功能,win10哪些功能沒用

    win10有什么好用的功能,win10哪些功能沒用 相關圖片win10有沒有實用的功能相信很多實用win10系統的小伙伴都遇到了無法使用搜索功能的情況。那么,我們不能用win10搜索功能做什么呢?接下來,超人軟件編輯器將告訴您如何使用win10搜w1...

  • 怎么制作精美卡,制作精美

    怎么制作精美卡,制作精美 相關圖片創意手工相框制作精美本教程將向您介紹如何使用焰火來產生漂亮的導航效果。做起來并不難。教程的介紹非常詳細。新手朋友也可以來這里學習。我希望這個教程能幫助你!讓我們看...

  • 愛剪輯時間軸在哪,愛剪輯時間軸

    愛剪輯時間軸在哪,愛剪輯時間軸 相關圖片愛剪輯文字出現時間時間線是愛情片段中使用的工具之一,而且經常是需要的。通過時間軸,我們可以在編輯視頻的過程中實現準確定位,沒有屏幕、聲音和文本的尷尬情況,愛情片段...

  • ()()相關,孫德傳 相關

    ()()相關,孫德傳 相關 相關圖片相關什么意思媒體查詢可以在不同的條件下使用不同的樣式,使頁面在不同的終端設備@Media Media type和{your style}max width max widt顯著相關...

  • win10怎么添加輸入法語言,win10怎么添加搜狗輸入法

    win10怎么添加輸入法語言,win10怎么添加搜狗輸入法 相關圖片筆記本吃雞單點會停頓輸入法是每臺計算機不可缺少的軟件。但是,許多win10用戶不知道如何添加或刪除輸入法。然后,超人軟件將介紹添加或刪除win10輸入法的方法,window10怎樣添加輸...

關注微信

变脸官网查询