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??
原文地址:Working with Media in HTML5
轉載于:https://www.cnblogs.com/webzhangnan/archive/2012/10/06/2713379.html
總結
以上是生活随笔為你收集整理的video from html5的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Colab与谷歌云盘结合使用
- 下一篇： 工具类——FileUtils