HTML 5 Video + DOM

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 元素同樣擁有方法竞阐、屬性和事件祟辟。

其中的方法用于播放必孤、暫停以及加載等。其中的屬性(比如時長竭贩、音量等)可以被讀取或設置摹恨。其中的 DOM 事件能夠通知您,比方說娶视,<video> 元素開始播放、已暫停睁宰,已停止肪获,等等。

下例中簡單的方法柒傻,向我們演示了如何使用 <video> 元素孝赫,讀取并設置屬性,以及如何調用方法红符。

實例

為視頻創(chuàng)建簡單的播放/暫停以及調整尺寸控件:

播放/暫停 大 中 小

上面的例子調用了兩個方法:play() 和 pause()青柄。它同時使用了兩個屬性:paused 和 width伐债。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<div style="text-align: center;">
    <button onclick="playPause()">播放/暫停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br />
    <video id="video1" width="420" style="margin-top: 15px;" controls="controls">
        <source src="movie.ogg" type="video/ogg">
        <source src="movie.mp4" type="video/mp4">

        Your browser does not support the video tag.
    </video>

</div>
<script type="text/javascript">
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.paused();
    }
    function makeBig() {
        myVideo.width = 560;
    }
    function makeSmall() {
        myVideo.width = 320;
    }
    function makeNormal() {
        myVideo.width = 420;
    }
</script>
</body>
</html>

親自試一試

HTML5 <video> - 方法、屬性以及事件

下面列出了大多數(shù)瀏覽器支持的視頻方法致开、屬性和事件:

| 方法 | 屬性 | 事件 |
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| | duration | timeupdate |
| | ended | ended |
| | error | abort |
| | paused | empty |
| | muted | emptied |
| | seeking | waiting |
| | volume | loadedmetadata |
| | height | |
| | width | |

注釋:在所有屬性中峰锁,只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后双戳,其他屬性才可用虹蒋。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市飒货,隨后出現(xiàn)的幾起案子魄衅,更是在濱河造成了極大的恐慌,老刑警劉巖塘辅,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晃虫,死亡現(xiàn)場離奇詭異哲银,居然都是意外死亡盘榨,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來山憨,“玉大人,你說我怎么就攤上這事棚亩〖ン。” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵愕宋,是天一觀的道長。 經(jīng)常有香客問我雄妥,道長,這世上最難降的妖魔是什么枝秤? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任庆械,我火速辦了婚禮沐序,結果婚禮上,老公的妹妹穿的比我還像新娘特姐。我一直安慰自己,他們只是感情好觉壶,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布争剿。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蹬碧。 梳的紋絲不亂的頭發(fā)上翔始,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天脖镀,我揣著相機與錄音补憾,去河邊找鬼盈匾。 笑死,一個胖子當著我的面吹牛毕骡,可吹牛的內容都是我干的削饵。 我是一名探鬼主播窿撬,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼劈伴,長吁一口氣:“原來是場噩夢啊……” “哼追城!你這毒婦竟也來了色洞?” 一聲冷哼從身側響起锋玲,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤景用,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后惭蹂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體媚污,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年廷雅,在試婚紗的時候發(fā)現(xiàn)自己被綠了耗美。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡航缀,死狀恐怖商架,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情芥玉,我是刑警寧澤蛇摸,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站灿巧,受9級特大地震影響赶袄,放射性物質發(fā)生泄漏。R本人自食惡果不足惜抠藕,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一饿肺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧盾似,春花似錦敬辣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽汰聋。三九已至,卻和暖如春喊积,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背玄妈。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工乾吻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拟蜻。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓绎签,卻偏偏與公主長得像,于是被迫代替她去往敵國和親酝锅。 傳聞我的和親對象是個殘疾皇子诡必,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內容