video from html5

掌握HTML5中的多媒體--視頻(video)

除非你一直生活在一個偏遠的島嶼上,過去一年左右的時間,你應該已經聽說過HTML5的各式炒作。HTML5將重塑富Web應用的未來。

下面 Figure 1的示例展示了HTML5中video標簽與傳統的object標簽的不同.

Figure 1

1.? <section>

2.????? <h1>使用HTML5的video標簽播放視頻</h1>

3.????? <videosrc="video1.mp4">

4.????? </video>

5.? </section>

6.? <section>

7.????? <h1>使用Flash插件播放視頻</h1>

8.????? <objecttype="application/x-shockwave-flash"

9.??? ?????????????data="player.swf"width="290"height="24">

10.??????? <paramname="movie"value="player.swf">

11.??? </object>

12.</section>

那么重要的是什么呢? 這兩個示例很簡單,也易于實現。因為<視頻>標記是一個用來播放媒體的標準, 你不必猜測瀏覽器是否要安裝特定的某個版本插件。這個標準正是HTML之前最為缺少的那部分。

?

HTML5支持的媒體格式

HTML5支持AAC, MP3 和 Ogg Vorbis三種音頻格式，以及Ogg Theora, WebM 和MPEG-4三種視頻格式.

但并不是所有瀏覽器都支持所有的格式。如下表：

Figure 2瀏覽器支持的媒體格式

?

瀏覽器

視頻格式

音頻格式

?

Ogg Theora

H.264

VP8 (WebM)

Ogg Vorbis

MP3

Wav

Internet Explorer

手動安裝

9.0

手動安裝

No

Yes

No

Mozilla Firefox

3.5

No

4.0

Yes

No

Yes

Google Chrome

3.0

No

6.0

Yes

Yes

Yes

Safari

手動安裝

3

手動安裝

No

Yes

Yes

Opera

10.50

No

10.60

Yes

No

Yes

?

?

使用視頻標簽<video>

在HTML5中播放視頻，直接使用<video>標簽就可以了, 如下所示:

1. <videosrc="video.mp4"controls/>

src屬性 (http://www.w3.org/TR/html5/video.html#the-source-element) 設備要播放視頻的名稱(可以多個), control的布爾值用來調整是否顯示播放控制欄. 完整的屬性列表如下所示:

Figure 3視頻相關的屬懷

?

屬性

值

描述

?Muted

Muted

定義的音頻的初始狀態.目前僅支持muted.

?Crossorigin


定義當前視頻是否是一個跨域的項目.

?Mediagroup

ID

將多個視頻或音頻集合在一起，并結合MediaController實現同步控制.

?Autoplay

Autoplay

如果指定，視頻會在準備好(如已取得可播放視頻)后自動播放.

?Controls

Controls

添加播放控制及音量控制功能欄.

?Height

Pixels

指定播放器的高度，以pixel為單位.

?Loop

Loop

如果指定，視頻將重復播放.

?Poster

url

指定視頻的預覽圖.

?Preload

Preload

如果指定，視頻會在加頁面加載過程中被加載。當Autoplay被指定時，會被忽略。

?Src

url

目標視頻的URL.

?Width

Pixels

指定播放器的寬度，以pixel為單位.

?

?

下面是一使用了多個屬性的示例，也包括一個備用(fallback)的錯誤信息(當瀏覽器不支持video標簽時顯示).

1.? <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>

2.????? Your browser does not support the video tag.

3.? </video>

?

你也可以使用MIME指定視頻的編碼格式，如下：

1.?????? <!-- H.264 Constrained baseline profile video (main and extended video compatible)

2.?????? ? level 3 and Low-Complexity AAC audio in MP4 container -->

3.?????? <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

4.?????? <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity

5.?????? ? AAC audioin MP4 container -->

6.?????? <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

?

你也可使用JavaScript來設定這些屬性. 如下面的代碼示例:

<!—顯示控制欄的三種方式-->

<videocontrols>

<videocontrols="">

<videocontrols="controls">

// JavaScript中顯示控制欄的兩種方式

video.controls = true;

video.setAttribute

?????? ('controls',

??????? 'controls');

?

如果無法確定目標瀏覽器是否能支持<video>或者你的視頻格式，你最好指定一個回退的信息，以告訴用戶為什么沒有到期望的內容。如下所示：

1. <videocontrols>

2.???? <sourcesrc="video1.mp4"/>

3.???? <sourcesrc="video1.ogv"/>

4.???? <sourcesrc="video1.webm"/>

5.???? <p>This browser does not support HTML5 video</p>

6. </video>

?

如果你要確保視頻可以被播放，你可以按照以前的方式加入一個flash的object標簽,如下：

1. <videocontrols>

2.???? <sourcesrc="video1.mp4"/>

3.???? <sourcesrc="video1.ogv"/>

4.???? <sourcesrc="video1.webm"/>

5.???? <objectdata="videoplayer.swf">

6.???????? <paramname="flashvars"value="video1.mp4">

7.???????? 您的瀏覽器對HTML5 Video?和?Flash 都不支持

8.???? </object>

9. </video>

?

也可以在JavaScript中使用canPlayType來檢測瀏覽器是否可以播放某個格式的視頻：

1.?????? var video = document.getElementsByTagName('video')[0];

2.?????? if (video.canPlayType)

3.?????? ?? { //支持video標簽

4.?????? if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))

5.?????? ????? { // it may be able to play

???????? ?????}

6.?????? ??????? else

7.?????? ????? {// the codecs or container are not supported

8.?????? ??????? fallback(video);

9.?????? ? }

10.????? }

?

如果希望有更明確清晰的提示，可以使用onerror事件監聽器來報告一個錯誤：

1.?????? <video src="video.mp4"

2.?????? ?????? οnerrοr="fallback(this)">

3.?????? ?????? 不支持<video>

4.?????? </video>

?

使用poster,你可以在video播放區域顯示一張圖片來替代，它可以用來顯示視頻的預覽圖。下面是一個示例:

1.?????? <video src="video1.mp4" poster="preview.jpg"</video>

?

最后，使用JavaScript和HTML,你就可以創建一個交互性的視頻播放器。Figure 4 展示如何使用JavaScript添加一個video并響應用戶的控制操作.(譯注:比如Youtue就是采用動態創建video控件的方式來提供視頻播放功能的。)

Figure 4?JavaScript對視頻的控制

1.?????? var video = document.createElement('video');

2.?????? video.src ='video1.mp4';

3.?????? video.controls =true;

4.?????? document.body.appendChild(video);

5.?????? var video = new Video();

6.?????? video.src ='video1.mp4';

7.?????? var video = new Video('video1.mp4')

8.?????? <script>

9.?????? ??? var video = document.getElementsByTagName('video')[0];

10.????? </script>

11.????? <inputtype="button"value="Play"onclick="video.play()">

12.????? <inputtype="button"value="Pause"onclick="video.pause()">

?

完整的事件和特性列表，參考http://www.w3.org/TR/html5/video.html#playing-the-media-resource.

?

譯注: 作者的代碼可能會讓你有些疑問。看的時候，要注意分辨作者可能是使用多種方式來實現同一個功能。以最后一個代碼為例，其中5~7行是1~2行的另兩種寫法。?

以下是一份動態加入video元件，并可以控制靜音的功能示例:

*muteVideo是靜音狀態切換函數

*playVideo函數在沒有video控件時會添加一個控件，如果已經存在就播放。

?

[javascript] view plaincopyprint?
  1. function?addSourceToVideo(element,src,type)??
  2. {??
  3. ?var?source?=?document.createElement('source');??
  4. ?source.src?=?src;??
  5. ?source.type=?type;??
  6. ???
  7. ?element.appendChild(source);??
  8. }??
  9. ??
  10. function?insertVideo(src,type,width,height)??
  11. {??
  12. ?var?vid?=?document.createElement("video");??
  13. ???
  14. ?vid.controls="controls";??
  15. ?vid.width?=?width;??
  16. ?vid.height=height;??
  17. ?vid.id?=?"video_control";??
  18. ????vid.muted=?false;??
  19. ???
  20. ?addSourceToVideo(vid,src,type);??
  21. ???
  22. ?document.getElementById("show").appendChild(vid);??
  23. }??
  24. ??
  25. function?muteVideo()??
  26. {??
  27. ?var?vid?=?document.getElementById("video_control");??
  28. ???
  29. ?if(vid?==?undefined)??
  30. ?return;??
  31. ???
  32. ?if?(vid.muted==undefined?||?!vid.muted)??
  33. ?{??
  34. ?vid.muted?=?true;??
  35. ?}??
  36. ?else??
  37. ?{??
  38. ?vid.muted?=?false;??
  39. ?}??
  40. }??
  41. ??
  42. function?playVideo()??
  43. {??
  44. ????var?video?=?document.getElementById("video_control");??
  45. ??????
  46. ????if(video==undefined)??
  47. ????{??
  48. ?????insertVideo("files/happyfit2.mp4","video/mp4",604,256);??
  49. ?????video?=?document.getElementById("video_control");??
  50. ????}??
  51. ??
  52. ?video.play();??
  53. }??
function addSourceToVideo(element,src,type)
{var source = document.createElement('source');source.src = src;source.type= type;element.appendChild(source);
}function insertVideo(src,type,width,height)
{var vid = document.createElement("video");vid.controls="controls";vid.width = width;vid.height=height;vid.id = "video_control";vid.muted= false;addSourceToVideo(vid,src,type);document.getElementById("show").appendChild(vid);
}function muteVideo()
{var vid = document.getElementById("video_control");if(vid == undefined)return;if (vid.muted==undefined || !vid.muted){vid.muted = true;}else{vid.muted = false;}
}function playVideo()
{var video = document.getElementById("video_control");if(video==undefined){insertVideo("files/happyfit2.mp4","video/mp4",604,256);video = document.getElementById("video_control");}video.play();
}

?

原文地址:Working with Media in HTML5

轉載于:https://www.cnblogs.com/webzhangnan/archive/2012/10/06/2713379.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/274575.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/274575.shtml
英文地址，請注明出處：http://en.pswp.cn/news/274575.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

我撿到寶了！2022版前端面試上岸手冊，最新最細致！

我撿到寶了！2022版前端面試上岸手冊，最新最細致！

大裁員背景下&#xff0c;沒什么比辭職后找不到工作更扎心&#xff01;在行情好轉前&#xff0c;前端程序員只能“猥瑣發育”&#xff0c;不輕易跳槽&#xff0c;同時要修煉內功&#xff1a;對八股文、底層源碼、重點項目等進行查缺補漏&#xff0c;靜待行情好轉抓住機會&#…
閱讀更多...
flo file_Flo菜單簡介：可擴展的拇指友好型移動導航

flo file_Flo菜單簡介：可擴展的拇指友好型移動導航

flo fileWhen it comes to using my phone, I’m a thumb guy and I like using my phone held in one hand. Well, apparently 49% of us prefer it like this.說到使用手機&#xff0c;我是個拇指小伙&#xff0c;我喜歡用一只手握住手機。 好吧&#xff0c;顯然我們當中有49…
閱讀更多...
超炫的iphone應用UI/UX設計賞析

超炫的iphone應用UI/UX設計賞析

日期&#xff1a;2012-10-5 來源&#xff1a;GBin1.com 要想成為一款成功的iOS應用&#xff0c;不單單是功能設計&#xff0c;還需要有超棒的用戶界面和用戶體驗的完美設計。為了帶給大家更多的設計靈感&#xff0c;今天我們分享另外一套來自dribbble的iOS應用UI和UX設計&…
閱讀更多...
Git實戰進階教程

Git實戰進階教程

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…
閱讀更多...
什么是設計模式_什么是設計？

什么是設計模式_什么是設計？

什么是設計模式Imagine, you are out waiting for a taxi. You are about to miss your appointment. You wait for minutes but Good Lord! — there’s not a single taxi that can offer you a ride.想象一下&#xff0c;您正在外面等出租車。 您將錯過約會。 您等待幾分鐘&…
閱讀更多...
hive實現not in

hive實現not in

當前HIVE 不支持 not in 中包含查詢子句的語法&#xff0c;形如如下的HQ語句是不被支持的: 查詢在key字段在a表中&#xff0c;但不在b表中的數據 select a.key from a where key not in(select key from b) 該語句在hive中不支持 可以通過left outer join進行查詢,&#xff0…
閱讀更多...
有哪些值得學習的大型 React 開源項目？

有哪些值得學習的大型 React 開源項目？

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…
閱讀更多...
成年人的樣子是什么樣子_不只是看樣子

成年人的樣子是什么樣子_不只是看樣子

成年人的樣子是什么樣子As a branding, packaging, and digital product designer, both at Input Logic and as a freelancer, I work with clients across a wide array of industries, and am responsible for simultaneously getting to the heart of what each client wan…
閱讀更多...
HDU 3664 Permutation Counting(DP)

HDU 3664 Permutation Counting(DP)

題目鏈接 弱爆啦&#xff0c;組合弱爆了&#xff0c;反正是沒想出來怎么搞這個題&#xff0c;其實這個公式不難推啊&#xff0c;反正就是沒推出來。今天隊內賽&#xff0c;實在是沒辦法了&#xff0c;暴力寫了個DFS&#xff0c;先把10以內的打出表來&#xff0c;發現類似楊輝三…
閱讀更多...
如何在工作中打造影響力，帶動同事？

如何在工作中打造影響力，帶動同事？

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…
閱讀更多...
谷歌maps菜單語言設置_Google Maps：拯救未來之路— UX案例研究

谷歌maps菜單語言設置_Google Maps：拯救未來之路— UX案例研究

谷歌maps菜單語言設置I have a lousy sense of direction, so Google Maps has always been my right-hand app. On a whim last year, I decided to skip the beach and sunburn and head to Budapest for spring break. That’s when Google Maps became my best friend.我的…
閱讀更多...
this和prototype

this和prototype

this出現在構造函數中&#xff0c;更多的是表示一種特有的屬性&#xff1b; prototype主要用于拓展函數的屬性&#xff0c;方法。 在函數類實例化的時候&#xff0c;this的屬性需要復制相應的副本&#xff0c;prototype不用。 function Blog(title,content) { this.titletitle;…
閱讀更多...
1萬小時后，我從外包走進了字節跳動，現在出了一本書，文末送書！

1萬小時后，我從外包走進了字節跳動，現在出了一本書，文末送書！

謹以此書獻給相信“努力有用”的你by 大史不說話《 前端跨界開發指南&#xff1a;JavaScript工具庫原理解析與實戰》先做個自我介紹我是大史不說話&#xff0c;是一名前端工程師&#xff0c;一個相信“努力有用”的、不太聰明的、行動力還可以的程序員。曾經因為一篇《10000小時…
閱讀更多...
視覺設計師跟平面設計_使設計具有視覺吸引力

視覺設計師跟平面設計_使設計具有視覺吸引力

視覺設計師跟平面設計Interaction Design is very gratifying.交互設計非常令人滿意。 From fast critical thinking to extracting ideas in tangible forms within the team is sure fun and challenging.從快速的批判性思維到在團隊內部以有形的形式提煉想法&#xff0c;無…
閱讀更多...
ExtJs4 筆記 Ext.tab.Panel 選項卡

ExtJs4 筆記 Ext.tab.Panel 選項卡

本篇講解選項卡控件。 一、基本選項卡 首先我們來定義一個基本的選項卡控件&#xff0c;其中每個Tab各有不同&#xff0c;Tab的正文內容可以有三種方式獲取&#xff1a; 1.基本方式:通過定義html和items的方式。 2.讀取其他html的信息:通過設置contentEl就可以獲取其他html的信…
閱讀更多...
一直刷不動算法題，懷疑人生？試試五毒掌法！

一直刷不動算法題，懷疑人生？試試五毒掌法！

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…
閱讀更多...
還在用開發者工具上傳小程序? 快來試試 miniprogram-ci 提效摸魚

還在用開發者工具上傳小程序? 快來試試 miniprogram-ci 提效摸魚

1. 前言大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含包含jQuery、underscore、lo…
閱讀更多...
ListView幾個比較特殊的屬性

ListView幾個比較特殊的屬性

Android:stackFromBottom"true" 設置該屬性之后你做好的列表就會顯示在列表的最下面&#xff0c;值為true和false android:transcriptMode"alwaysScroll" 要用ListView或者其它顯示大量Items的控件實時跟蹤或者查看信息&#xff0c;并且希望最新的…
閱讀更多...
超級瑪麗馬里奧版下載_將超級馬里奧賦予生命

超級瑪麗馬里奧版下載_將超級馬里奧賦予生命

超級瑪麗馬里奧版下載Have you ever seen a zoetrope? If today’s sophisticated computer animation is the latest evolution of the form, then the remarkable zoetrope is a crucial ancestor; the transitional form between the drawing and the animation.等皆你見過…
閱讀更多...
如何在繁重的工作中持續成長？

如何在繁重的工作中持續成長？

大家好&#xff0c;我是若川。持續組織了近一年的源碼共讀活動&#xff0c;感興趣的可以 加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…
閱讀更多...
最新文章

Copyright @ 2022~2023