这次的教程来自Lynda.com.HTML5.Video.and.Audio.in.Depth。
尽管目前在HTML中嵌入视频还不是主流(貌似最多的是使用Flash吧),但毕竟是今后的趋势,所以还是很重要的。
简单的嵌入视频和音频的代码分别是:
<video src="../_video/podcast.ogv" controls>
<p>Your browser does not support HTML5 video.</p>
</video>
<audio src="../_audio/podcast-audio.oga" controls>
<p>Your browser does not support HTML5 audio.</p>
</audio>
其中:
- src指定了节目的源;
- controls表示带上浏览器自带的播放器控制;
- <p></p>内的是页面遇到不支持的浏览器时显示的文本内容;
由于各个浏览器所能支持的压缩方式不一样,所以我们需要修改为能够支持多个浏览器的形式:
<video controls>
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<audio controls>
<source src="../_audio/podcast-audio.m4a" type="audio/mp4" />
<source src="../_audio/podcast-audio.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 audio.</p>
</audio>
预加载:为了使得浏览器在页面加载后能够自后台缓冲数据,并且在播放时保证流畅码率,我们通过以下代码搞定:
<video controls preload="auto">
auto是默认值;如果取消预加载则使用none;还有一个值是"metadata",表示部分预加载代表作者认为用戶不期望此视频,但页面提供了一些元数据(包括尺寸,第一帧,节目列表,节目时长等等)。
autoplay属性表示是否在页面加载后立即播放视频:
<video controls preload="auto" autoplay>
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
loop属性指定是否循环播放(貌似Firefox低版本可能不支持,但我在FF 13上已经能够看到支持了。遇到不支持的也不要紧,加上一段js代码搞定):
<video id="myVideo" controls preload="auto" autoplay loop>
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<script>
$("#myVideo").bind("ended", function(){
this.play();
});
</script>
poster属性用来指定一张预览图片(在视频无法正常显示预览图时):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Poster Demo</title>
</head>
<body>
<p>1. No Poster, No Preload</p>
<video controls preload="none">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>2. No Poster, Preload</p>
<video controls preload="auto">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>3. Poster, No Preload</p>
<video controls preload="none" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>4. Poster, Preload</p>
<video controls preload="auto" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
</body>
</html>
使用width/height设置宽和高,注意如果宽高比与视频宽高比不匹配可能无法充满指定的区域:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Width and Height Demo</title>
<style>
body { width: 1500px; }
video { border: 1px solid #ccc; }
p { background-color: #eee; }
</style>
</head>
<body>
<p>1. No Width/Height</p>
<video controls preload="none">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls preload="auto">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls preload="none" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>2. Too Tall</p>
<video controls width="240" height="300" preload="none">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="240" height="300" preload="auto">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="240" height="300" preload="none" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>3. Too Wide</p>
<video controls width="400" height="150" preload="none">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="400" height="150" preload="auto">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="400" height="150" preload="none" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>4. Just Right</p>
<video controls width="480" height="300" preload="none">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="480" height="300" preload="auto">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<video controls width="480" height="300" preload="none" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<br><br>
<p>5. Black Background</p>
<video controls width="240" height="300" preload="auto" style="background-color: #000;">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
</body>
</html>
显示标题或字幕:
<video width="480" height="300" controls preload="auto" poster="../_video/podcast-poster.jpg">
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<track kind="captions" src="../_video/podcast-captions.vtt" />
<p>Your browser does not support HTML5 video.</p>
</video>
至此,一个基本的页面中添加播放器功能已经完成。