Posted on 2013-01-17 10:05
領悟書生 閱讀(2206)
評論(0) 編輯 收藏
在過去，我們如果想在Web上播放視頻，也是都是通過Flash來播放，同樣并不是所有的瀏覽器都安裝了Flash播放器插件，而現在我們在HTML5中，就能完全脫離Flash或其他的插件來播放視頻了
1、視頻格式的簡單介紹
視頻格式：avi、rmb、wmv、mpeg4、ogg、webm
視頻主要有三部分組成：視頻、音頻、編碼格式
HTML5支持的格式：
| Ogg= 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 MPEG4= 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件 |
2、HTML5視頻標簽<video>屬性
- <video src="movie.mp4" controls="controls"> </video>
- <video src="movie.mp4" controls="controls">
- 瀏覽器不支持HTML5的視頻播放功能
- </video>
- <video width="300" controls="controls" …>
- <source src="movie.ogg" type="video/ogg">
- <source src="movie.mp4" type="video/mp4">
- </video>
3、HTML5視頻API控件
獲得video標簽，這里是DOM對象
varvideo = document.getElementById('videoID');
也可以通過jQuery的方法，如下：
varvideo = $('#videoID').get(0);
| 載入視頻：load() ， 播放視頻：play() ， 暫停：pause() ， 快進10秒：currentTime+=10 播放速度增加：playbackRate++ 播放速度增加0.1：playbackRate+=0.1 音量增加：volume+=0.1 靜音：muted=true |
3、示例
- <!DOCTYPE html>
- <head>
- <meta charset=utf-8>
- <title>HTML5視頻教程-視頻播放功能</title>
- <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
- </script>
- <script>
- $(document).ready(function(){
- var video = $('#myvideo');
-
- $("#play").click(function(){ video[0].play(); });
- $("#pause").click(function(){ video[0].pause(); });
- $("#go10").click(function(){ video[0].currentTime+=10; });
- $("#back10").click(function(){ video[0].currentTime-=10; });
- $("#rate1").click(function(){ video[0].playbackRate+=2; });
- $("#rate0").click(function(){ video[0].playbackRate-=2; });
- $("#volume1").click(function(){ video[0].volume+=0.1; });
- $("#volume0").click(function(){ video[0].volume-=0.1; });
- $("#muted1").click(function(){ video[0].muted=true; });
- $("#muted0").click(function(){ video[0].muted=false; });
- $("#full").click(function(){
- video[0].webkitEnterFullscreen(); // webkit類型的瀏覽器
- video[0].mozRequestFullScreen(); // FireFox瀏覽器
- });
- });
-
- </script>
- </head>
- <video id="myvideo" width="400">
- <source src="iceage4.mp4" type="video/mp4" />
- <source src="iceage4.webm" type="video/webM" />
- <source src="iceage4.ogv" type="video/ogg" />
- 你的瀏覽器不支持html5
- </video>
- <hr>
- <button id="play">播放</button>
- <button id="pause">暫停</button>
- <button id="go10">快進10秒</button>
- <button id="back10">快退10秒</button>
- <button id="rate1">播放速度+</button>
- <button id="rate0">播放速度-</button>
- <button id="volume1">聲音+</button>
- <button id="volume0">聲音-</button>
- <button id="muted1">靜音</button>
- <button id="muted0">解除靜音</button>
- <button id="full">全屏</button>
- </body>
-
- </body>
- </html>
效果
本文鏈接：HTML5 視頻播放事件屬性與API控件，由領悟書生原創
轉載請注明出處【http://www.656463.com/article/331】