7. HTML5 多媒体

HTML5的一个重大改进是引入了对音频和视频的原生支持，不再需要依赖第三方插件（如Flash）。这使得在网页中嵌入和控制多媒体内容变得简单而强大。

音频（

HTML5引入了

基本语法：

html复制代码

更完整的例子：

html复制代码

属性说明：

• controls：显示播放控件
• autoplay：自动播放（注意：许多浏览器会阻止自动播放）
• loop：循环播放
• muted：静音
• preload：预加载方式（auto/metadata/none）
• ：指定多种音频格式，浏览器会选择第一个支持的格式

视频（

HTML5引入了

基本语法：

html复制代码

更完整的例子：

html复制代码

属性说明：

• width/height：视频尺寸
• controls：显示播放控件
• poster：视频播放前显示的封面图片
• autoplay/loop/muted/preload：与音频标签相同
• ：指定多种视频格式
• ：添加字幕或章节标记

多媒体与JavaScript交互

HTML5多媒体元素可以通过JavaScript进行控制，实现更丰富的交互功能。

html复制代码


    播放/暂停
    小屏
    大屏
    正常


<script>
    var video = document.getElementById("myVideo");
    
    function playPause() { 
        if (video.paused) 
            video.play(); 
        else 
            video.pause(); 
    } 
    
    function makeSmall() { 
        video.width = 160; 
    } 
    
    function makeBig() { 
        video.width = 640; 
    } 
    
    function makeNormal() { 
        video.width = 320; 
    }
</script>

多媒体嵌入的兼容性考虑

虽然现代浏览器都支持HTML5多媒体标签，但仍需考虑以下兼容性问题：

1. 视频/音频格式支持：
2. MP4/H.264：最广泛支持
3. WebM：开源格式，Chrome、Firefox等支持
4. Ogg Theora/Vorbis：部分浏览器支持
5. 使用标签提供多种格式，确保跨浏览器兼容性
6. 为不支持HTML5的旧浏览器提供替代内容：

html复制代码

练习题

1. 创建一个音乐播放器页面，嵌入至少三首不同的音频文件，添加合适的控件。
2. 设计一个视频展示页面，包含一个主视频和几个缩略图，点击缩略图可以切换主视频。
3. 制作一个包含视频的教程页面，视频下方添加相关的文字说明和步骤指导。
4. 创建一个带有自定义控制按钮的视频播放器，实现播放/暂停、音量控制和全屏功能。
5. 为一个视频添加多语言字幕（使用标签），确保视频能够显示不同语言的字幕。