八赎懦、H5中對(duì)音視頻的設(shè)計(jì)

html5標(biāo)簽

<video>:Html5提供的播放視頻的標(biāo)簽
    src:資源地址
    controls:該屬性定義是顯示還是隱藏用戶(hù)控制界面
    
<audio>:Html5提供的播放音頻的標(biāo)簽
    src:資源地址
    controls:該屬性定義是顯示還是隱藏用戶(hù)控制界面
    
<source>
    視頻:
    type='video/webm; codecs="vp8, vorbis"'
    type='video/ogg; codecs="theora, vorbis"'
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    
    音頻:
    type='audio/ogg; codecs="vorbis"'
    type='audio/aac; codecs="aac"'
    type='audio/mpeg'

video標(biāo)簽的屬性

width  :視頻顯示區(qū)域的寬度,單位是CSS像素
height :視頻展示區(qū)域的高度幻工,單位是CSS像素
poster :一個(gè)海報(bào)幀的URL励两,用于在用戶(hù)播放或者跳幀之前展示

src       :    要嵌到頁(yè)面的視頻的URL
controls  :  顯示或隱藏用戶(hù)控制界面
autoplay  :  媒體是否自動(dòng)播放
loop      :  媒體是否循環(huán)播放
muted     :  是否靜音
preload   :  該屬性旨在告訴瀏覽器作者認(rèn)為達(dá)到最佳的用戶(hù)體驗(yàn)的方式是什么
                none: 提示作者認(rèn)為用戶(hù)不需要查看該視頻,服務(wù)器也想要最小化訪(fǎng)問(wèn)流量囊颅;
                          換句話(huà)說(shuō)就是提示瀏覽器該視頻不需要緩存当悔。
                metadata: 提示盡管作者認(rèn)為用戶(hù)不需要查看該視頻,
                             不過(guò)抓取元數(shù)據(jù)(比如:長(zhǎng)度)還是很合理的踢代。
                auto: 用戶(hù)需要這個(gè)視頻優(yōu)先加載盲憎;換句話(huà)說(shuō)就是提示:如果需要的話(huà),
                         可以下載整個(gè)視頻胳挎,即使用戶(hù)并不一定會(huì)用它饼疙。
                空字符串:也就代指 auto 值。

audio標(biāo)簽的屬性

src       
controls  
autoplay  
loop      
muted     
preload   

音視頻js相關(guān)屬性

duration    :  媒體總時(shí)間(只讀)
currentTime :  開(kāi)始播放到現(xiàn)在所用的時(shí)間(可讀寫(xiě))
muted       :  是否靜音(可讀寫(xiě),相比于volume優(yōu)先級(jí)要高)
volume      :  0.0-1.0的音量相對(duì)值(可讀寫(xiě))
paused      :  媒體是否暫停(只讀)
ended       :  媒體是否播放完畢(只讀)
error       :  媒體發(fā)生錯(cuò)誤的時(shí)候慕爬,返回錯(cuò)誤代碼 (只讀)
currentSrc  :  以字符串的形式返回媒體地址(只讀)


視頻多的部分:
    poster  :   視頻播放前的預(yù)覽圖片(讀寫(xiě))
    width窑眯、height  :   設(shè)置視頻的尺寸(讀寫(xiě))
    videoWidth、 videoHeight  :   視頻的實(shí)際尺寸(只讀)

音視頻js相關(guān)函數(shù)

play()  :  媒體播放
pause()  :  媒體暫停
load()  :  重新加載媒體

js相關(guān)事件

視頻:
    abort    在播放被終止時(shí)觸發(fā),例如, 當(dāng)播放中的視頻重新開(kāi)始播放時(shí)會(huì)觸發(fā)這個(gè)事件医窿。
    canplay 在媒體數(shù)據(jù)已經(jīng)有足夠的數(shù)據(jù)(至少播放數(shù)幀)可供播放時(shí)觸發(fā)磅甩。這個(gè)事件對(duì)應(yīng)CAN_PLAY的readyState。
    canplaythrough  在媒體的readyState變?yōu)镃AN_PLAY_THROUGH時(shí)觸發(fā)姥卢,表明媒體可以在保持當(dāng)前的下載速度的情況下不被中斷地播放完畢卷要。注意:手動(dòng)設(shè)置currentTime會(huì)使得firefox觸發(fā)一次canplaythrough事件,其他瀏覽器或許不會(huì)如此独榴。
    durationchange  元信息已載入或已改變僧叉,表明媒體的長(zhǎng)度發(fā)生了改變。例如括眠,在媒體已被加載足夠的長(zhǎng)度從而得知總長(zhǎng)度時(shí)會(huì)觸發(fā)這個(gè)事件彪标。
    emptied 媒體被清空(初始化)時(shí)觸發(fā)。
    ended   播放結(jié)束時(shí)觸發(fā)掷豺。
    error   在發(fā)生錯(cuò)誤時(shí)觸發(fā)捞烟。元素的error屬性會(huì)包含更多信息。參閱Error handling獲得詳細(xì)信息当船。
    loadeddata  媒體的第一幀已經(jīng)加載完畢题画。
    loadedmetadata  媒體的元數(shù)據(jù)已經(jīng)加載完畢,現(xiàn)在所有的屬性包含了它們應(yīng)有的有效信息德频。
    loadstart   在媒體開(kāi)始加載時(shí)觸發(fā)苍息。
    mozaudioavailable   當(dāng)音頻數(shù)據(jù)緩存并交給音頻層處理時(shí)
    pause   播放暫停時(shí)觸發(fā)。
    play    在媒體回放被暫停后再次開(kāi)始時(shí)觸發(fā)。即竞思,在一次暫停事件后恢復(fù)媒體回放表谊。
    playing 在媒體開(kāi)始播放時(shí)觸發(fā)(不論是初次播放、在暫停后恢復(fù)盖喷、或是在結(jié)束后重新開(kāi)始)爆办。
    progress    告知媒體相關(guān)部分的下載進(jìn)度時(shí)周期性地觸發(fā)。有關(guān)媒體當(dāng)前已下載總計(jì)的信息可以在元素的buffered屬性中獲取到课梳。
    ratechange  在回放速率變化時(shí)觸發(fā)距辆。
    seeked  在跳躍操作完成時(shí)觸發(fā)。
    seeking 在跳躍操作開(kāi)始時(shí)觸發(fā)暮刃。
    stalled 在嘗試獲取媒體數(shù)據(jù)跨算,但數(shù)據(jù)不可用時(shí)觸發(fā)。
    suspend 在媒體資源加載終止時(shí)觸發(fā)椭懊,這可能是因?yàn)橄螺d已完成或因?yàn)槠渌驎和诸蚕!?    timeupdate  元素的currentTime屬性表示的時(shí)間已經(jīng)改變。
    volumechange    在音頻音量改變時(shí)觸發(fā)(既可以是volume屬性改變灾搏,也可以是muted屬性改變).挫望。
    waiting 在一個(gè)待執(zhí)行的操作(如回放)因等待另一個(gè)操作(如跳躍或下載)被延遲時(shí)觸發(fā)

音頻:
    abort    在播放被終止時(shí)觸發(fā),例如, 當(dāng)播放中的視頻重新開(kāi)始播放時(shí)會(huì)觸發(fā)這個(gè)事件。
    canplay 在媒體數(shù)據(jù)已經(jīng)有足夠的數(shù)據(jù)(至少播放數(shù)幀)可供播放時(shí)觸發(fā)狂窑。這個(gè)事件對(duì)應(yīng)CAN_PLAY的readyState。
    canplaythrough  在媒體的readyState變?yōu)镃AN_PLAY_THROUGH時(shí)觸發(fā)桑腮,表明媒體可以在保持當(dāng)前的下載速度的情況下不被中斷地播放完畢泉哈。注意:手動(dòng)設(shè)置currentTime會(huì)使得firefox觸發(fā)一次canplaythrough事件,其他瀏覽器或許不會(huì)如此破讨。
    durationchange  元信息已載入或已改變丛晦,表明媒體的長(zhǎng)度發(fā)生了改變。例如提陶,在媒體已被加載足夠的長(zhǎng)度從而得知總長(zhǎng)度時(shí)會(huì)觸發(fā)這個(gè)事件烫沙。
    emptied 媒體被清空(初始化)時(shí)觸發(fā)。
    ended   播放結(jié)束時(shí)觸發(fā)隙笆。
    error   在發(fā)生錯(cuò)誤時(shí)觸發(fā)锌蓄。元素的error屬性會(huì)包含更多信息。參閱Error handling獲得詳細(xì)信息撑柔。
    loadeddata  媒體的第一幀已經(jīng)加載完畢瘸爽。
    loadedmetadata  媒體的元數(shù)據(jù)已經(jīng)加載完畢,現(xiàn)在所有的屬性包含了它們應(yīng)有的有效信息铅忿。
    loadstart   在媒體開(kāi)始加載時(shí)觸發(fā)剪决。
    mozaudioavailable   當(dāng)音頻數(shù)據(jù)緩存并交給音頻層處理時(shí)
    pause   播放暫停時(shí)觸發(fā)。
    play    在媒體回放被暫停后再次開(kāi)始時(shí)觸發(fā)。即柑潦,在一次暫停事件后恢復(fù)媒體回放享言。
    playing 在媒體開(kāi)始播放時(shí)觸發(fā)(不論是初次播放、在暫停后恢復(fù)渗鬼、或是在結(jié)束后重新開(kāi)始)览露。
    progress    告知媒體相關(guān)部分的下載進(jìn)度時(shí)周期性地觸發(fā)。有關(guān)媒體當(dāng)前已下載總計(jì)的信息可以在元素的buffered屬性中獲取到乍钻。
    ratechange  在回放速率變化時(shí)觸發(fā)肛循。
    seeked  在跳躍操作完成時(shí)觸發(fā)。
    seeking 在跳躍操作開(kāi)始時(shí)觸發(fā)银择。
    stalled 在嘗試獲取媒體數(shù)據(jù)多糠,但數(shù)據(jù)不可用時(shí)觸發(fā)。
    suspend 在媒體資源加載終止時(shí)觸發(fā)浩考,這可能是因?yàn)橄螺d已完成或因?yàn)槠渌驎和夹孔!?    timeupdate  元素的currentTime屬性表示的時(shí)間已經(jīng)改變。
    volumechange    在音頻音量改變時(shí)觸發(fā)(既可以是volume屬性改變析孽,也可以是muted屬性改變).搭伤。
    waiting 在一個(gè)待執(zhí)行的操作(如回放)因等待另一個(gè)操作(如跳躍或下載)被延遲時(shí)觸發(fā)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市袜瞬,隨后出現(xiàn)的幾起案子怜俐,更是在濱河造成了極大的恐慌,老刑警劉巖邓尤,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拍鲤,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡汞扎,警方通過(guò)查閱死者的電腦和手機(jī)季稳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)澈魄,“玉大人景鼠,你說(shuō)我怎么就攤上這事”陨龋” “怎么了铛漓?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)帘营。 經(jīng)常有香客問(wèn)我票渠,道長(zhǎng),這世上最難降的妖魔是什么芬迄? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任问顷,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘杜窄。我一直安慰自己肠骆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布塞耕。 她就那樣靜靜地躺著蚀腿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪扫外。 梳的紋絲不亂的頭發(fā)上莉钙,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音筛谚,去河邊找鬼磁玉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛驾讲,可吹牛的內(nèi)容都是我干的蚊伞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼吮铭,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼时迫!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起谓晌,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤掠拳,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后纸肉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體碳想,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年毁靶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逊移。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡预吆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出胳泉,到底是詐尸還是另有隱情拐叉,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布扇商,位于F島的核電站凤瘦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏案铺。R本人自食惡果不足惜蔬芥,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧笔诵,春花似錦返吻、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至谢翎,卻和暖如春捍靠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背森逮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工榨婆, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人吊宋。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓纲辽,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親璃搜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子拖吼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 教程一:視頻截圖(Tutorial 01: Making Screencaps) 首先我們需要了解視頻文件的一些基...
    90后的思維閱讀 4,697評(píng)論 0 3
  • 22、JQ的基礎(chǔ)語(yǔ)法这吻、核心原理和項(xiàng)目實(shí)戰(zhàn) jQ的版本和下載 jQuery版本 1.x:兼容IE6-8吊档,是目前PC端...
    萌妹撒閱讀 1,747評(píng)論 0 0
  • 第一章 HTML5 (2014年10月29日發(fā)布)新特性: 10個(gè) (1)新的語(yǔ)義標(biāo)簽 (2)增強(qiáng)型表單 (3)視...
    fastwe閱讀 955評(píng)論 0 1
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶(hù)的,因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體唾糯。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 3,887評(píng)論 0 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒(méi)有地址/指針的概念1.2> 泛型1.3> 類(lèi)型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,100評(píng)論 1 32