4-1 video/视频播放
学习要点
- 掌握video元素的基本用法
直到现在,在网页中的大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法,这样播放视频就不必依赖外部插件
在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识,有兴趣的朋友可以去查阅相关资料。我们重点学习video和audio两个元素的使用。
目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同,但是这个支持是动态变化的。
当前,video 元素支持三种视频格式:
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
支持的浏览器有:Firefox、Opera、Chrome
- MPEG4(mp4) = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
支持的浏览器有:IE9+、Chrome、Safari
虽然目前应用较广,单有专利保护,是收费在
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
支持的浏览器有:Chrome、Opera、Safari
专门为网页传播而设计在,清晰度高,压缩率也很高,并且开源免费,未来可能会成为主流。目前国外大在视频网站很多采用
video元素的属性
属性 | 属性值 | 描述 |
src | url | 要播放的视频的 URL地址。 |
width | 正整数/百分比 | 设置视频播放器的宽度。 |
height | 正整数/百分比 | 设置视频播放器的高度。 |
autoplay | 空值/autoplay | 视频在就绪后自动播放。 |
loop | 空值/loop | 循环播放。 |
controls | 空值/controls | 向用户显示控件,比如播放按钮 |
poster | 图片地址 | 视频未播放前显示的图片 |
preload auto/none/metadata 视频在页面加载时是否进行加载,并预备播放。一般不需要设置,使用默认值即可。
<video src="video/av.mp4" controls width=”100px” height=”100px” autoplay loop poster=”picture/1.png”>
当浏览器不支持video元素提示“你的浏览器不支持”
</video>
4.2source元素-解决浏览器额兼容
- HTML5 中新增的元素
- video和audio元素的子元素,可指定多个文件来源,用来解决浏览器的兼容问题
- 如果使用了source元素,则不可以在video和audio中设置src属性
<video controls poster="picture/1.png" loop autoplay>
<source src="video/8.mp4"type="video/mp4">
<!--浏览器从上到下检查视频格式,合适的就播放。-->
<source src="video/8.webm" type="video/webm">
抱歉你的浏览器不支持video元素
</video>
<source src=”视频地址” type=”video/视频格式”>
4-4 audio元素/格式的转换
当前,audio 元素支持三种音频格式:
- Ogg 免费, 支持的浏览器:Firefox、Opera、Chrome
- MP3 收费, 支持的浏览器: IE9+、Chrome、Safari
- Wav 收费, 支持的浏览器: Firefox、Chrome、Safari
audio元素的属性
属性 | 属性值 | 描述 |
src | url | 要播放的 音频的 URL地址。 |
controls | 空值/controls | 向用户显示控件,比如播放按钮 |
autoplay | 空值/autoplay | 音频在就绪后自动播放。一般不设置该属性。 |
loop | 空值/loop | 循环播放。 |
preload | auto/none/metadata | 音频在页面加载时是否进行加载,并预备播放。一般不需要设置,使用默认值即可。 |
source元素-解决浏览器额兼容
- HTML5 中新增的元素
- video和audio元素的子元素,可指定多个文件来源,用来解决浏览器的兼容问题
- 如果使用了source元素,则不可以在video和audio中设置src属性
<audio controls autoplay loop>
<source src="audio/1.mp3" type="audio/mp3">
<source src=”audio/1.mp3” type=”audio/mp3”>
</audio>
<audio controls loop autoplay>
<source src="audio/2.mp3" type="audio/mp3">
你的浏览器版本太低,请更换。。。
</audio>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>maklov..</title>
<meta charset="utf-8">
<meta name="author" content="liyue">
<meta name="keywords" content="html,js">
<style type="text/css">
</style>
</head>
<body>
<video src="video/1.mp4" controls width="250px" height="250px" autoplay poster="picture/1.png" loop>
当浏览器不支持显示“你的浏览器不支持video元素”
</video>
<video autoplay src="video/111.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay>
当浏览器不支持video元素提示“你的浏览器不支持”
</video>
<video src="video/112.mp4" autoplay controls width="250px" height="250px" poster="picture/3.png" loop autoplay></video>
<video src="video/4.mp4" controls autoplay width="250px" height="250px" poster="picture/4.png" loop></video>
<video src="video/8.mp4" controls loop autoplay width="250px" height="250px" poster="picture/1.png">
你的浏览器不支持
</video>
<video src="video/5.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
<video src="video/6.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
<video src="video/7.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
<video src="video/22.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
<video src="video/9.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
<video src="video/30.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
<video src="video/31.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
<video src="video/32.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
<video src="video/33.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
<video src="video/34.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
</body>
</html>