HTML5 多媒体

音频

HTML4.0 载入多媒体文件,需要是借助 Flash 实现,一般使用 embed 或者 object 元素,HTML5 新标准原生支持了音频和视频,增加了两个元素 audio & video

<!-- controls 显示控件,默认是背景音乐 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- preload 预加载 -->

<audio src="音频文件" controls="controls" loop="loop" preload autoplay></audio>

视频

视频的载入方式于音频类似。

<!-- poster 预览图 -->
<!-- width/height 宽高 -->
<!-- loop 循环播放 -->
<!-- autoplay 自动播放 -->
<!-- controls 显示控件 -->
<!-- preload 预加载 -->
<!-- muted 静音 -->

<video src="视频文件" poster="图片地址" controls="controls" width="600" height="600" loop="loop" autoplay preload muted></video>

<!-- 以上的很多参数是可选的,根据需要随意配搭 -->

兼容

一些特殊的多媒体格式,例如 webm ogg m4a wav ... 不同浏览器的支持稍微有点区别,HTML5 针对这一部分提供了兼容语法。

<!-- 浏览器会引入自己能识别的多媒体格式 -->

<video controls ... >
    <source src="audioname.webm">
    <source src="audioname.mp4">
    <source src="audioname.ogg">
</video>

<audio controls ... >
    <source src="audioname.mp3">
    <source src="audioname.m4a">
    <source src="audioname.wav">
</audio>

<!-- ps:常见的格式 .mp3 .mp4 现代主流浏览器都能支持 -->
HTML5 教程 HTML5 基本结构 HTML5 文本和语义 HTML5 布局 HTML5 列表 HTML5 组合 HTML5 表格 HTML5 链接和路径 HTML5 图片 HTML5 表单 HTML5 框架 HTML5 进度条 HTML5 多媒体