欢迎光临
你好
我是阿ken
文章目录
- 8.1 HTML5 多媒体的特性
- 8.2 多媒体的支持条件
-
- 8.2.1 视频和音频编解码器
-
- 1.视频编解码器
- 2.音频编解码器
- 8.2.2 多媒体的格式
-
- 1.视频格式
- 2.音频格式
- 8.2.3 支持视频和音频的浏览器
- 8.3 嵌入视频和音频
-
- 8.3.1 在 HTML5 中嵌入视频
- 8.3.2 在 HTML5 中嵌入音频
- 8.3.3 音、视频中的 source 元素
- 8.3.4 调用 页多媒体文件
-
- (1) 获取音、视频文件的 URL
- (2) 将其 URL 地址插入到 audio 标签中的 src 属性中即可。
- 8.4 CSS 控制视频的宽高
- 8.5 视频和音频的方法和事件
-
- 1. video 和 audio 的方法
- 2. video 和 audio 的事件
- 8.6 HTML5 音、视频发展趋势
-
- 1.流式音频、视频
- 2.跨资源的共享
- 3.字幕支持
- 4.编码解码的支持
值得一提的是，在 video 元素中还可以添加其他属性，来进一步优化视频的播放效果：
video 元素常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放视频。 |
| loop | loop | 视频结束时重新开始播放。 |
| preload | auto/meta/none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 ” autoplay ” ，则忽略该属性。 |
| poster | url | 当视频缓冲不足时，该属性值链接一个图像， 并将该图像按照一定的比例显示出来。 |
在上述案例的基础上，对 video 标签应用新属性，来优化视频播放效果，代码如下：
值得一提的是，在audio元素中还可以添加其他属性，来进一步优化音频的播放效果：
audio 元素常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 当页面载入完成后自动播放音频 |
| loop | loop | 音频结束时重新开始播放 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 ” autoplay ” ，则忽略该属性 |
上表中列举的 audio 元素的属性和 video 元素是相同的，这些相同的属性在嵌入音视频时是通用的。
8.3.3 音、视频中的 source 元素
虽然 HTML5 支持 Ogg、MPEG4 和 WebM 的视频格式以及 Vorbis、MP3和 WAV 的音频格式，但各浏览器对这些格式却不完全支持，
为了使音、视颖能够在各个浏览器中正常播放，往往需要提供多种格式的音、 视频文件，在 HTML5 中，运用 source 元素可以为 video 元素或 audio 元素提供多个备用文件。运用 source 元素添加音频的基本格式如下:
在上面的语法格式中，可以指定多个 source 元素为浏览器提供备用的音频文件。source 元素一般设置两个属性。
-
src：用于指定媒体文件的 URL 地址。
-
type：指定媒体文件的类型。
案例：为页面添加一个在火狐4.0和谷歌6.0都可以正常播放的添加一个音频文件，代码如下
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！