在HTML4.0.1时代，想在页面中播放音视频是一件非常困难和麻烦的事，但在HTML5时代，这个问题得到了很好的解决，只需要使用video和audio标记就可以实现，极大地减少了对外部插件的依赖，代码的编写也非常简单，接下来详细介绍这两款标记的使用方法。
audio标记技能目标
通过本小节的学习，掌握audio>标记在页面中的基本使用方法，初步理解该标记常用属性的功能，并能结合需求使用audio>标记，在页面中播放音频文件。
语法格式
audio src=’目标/源文件’ controls autoplay>
你的浏览器不支持音频标记
/audio>
格式说明
udio>用于定义播放音频文件的标记，调用该标记可以播放一段音频内容，通过“src”属性设置音频内容的文件来源；“controls”属性定义显示播放时的控制条，“autoplay”属性定义音频是否自动播放。
案例演示
需求：使用audio>标记自动播放一段音频内容，并添加控制条工具，根据上述功能，新建一个名称为h6_1.html在页面中加入代码。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档/title>
/head>
body>
audio src=“video/MUSIC_0576.mp3”
controls autoplay >
你的浏览器不支持音频播放
/audio>
/body>
/html>
页面文件h6_1.html在chrome浏览器执行后：
案例实践
新建一个页面，添加一个audio>标签，通过该标签在页面中自动播放一段音频内容，播放时，以页面中显示播放器的控制条。
扩展知识
在页面中，audio >标记除拥有“controls”和“autoplay”常用属性外，还拥有下列其他实用的属性，
video标记 技能目标
通过本小节的学习，掌握video>标记在页面中的基本使用方法，初步理解该标记常用属性的功能，并能结合需求使用 video>标记，在页面中播放视频格式的文件。
语法格式
video src=’目标/源文件’ controls autoplay>
你的浏览器不支持视频标记
/video>
格式说明’
video>用于定义播放视频文件的标记，分别使用“autoplay”和“controls”来定义标记是否进行自动播放视频文件和添加控制条。
案例演示
需求：使用video>标记自动播放一段指定宽高并添加控制条工具，根据上述功能，新建一个名称为h6_2.html在页面中加入代码。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档
/head>
body>
video src=“video/IMG_0473.MOV”
width=“200” height=“150”
autoplay controls>
当前浏览器
/video>
/body>
/html>
页面文件h6_2.html在chrome浏览器执行后，：
案例实践
新建一个页面，添加一个video>标记，通过该标记在页面中自动播放一段视频文件，在播放过程中，在播放过程中，可以通过工具条进行视频的控制。
扩展知识
无论是音频还是视频标记，当浏览器不支持标记时，标记包括的中间内容将显示在页面中；此外，视频标记的宽高属性，是标记加载前就需要执行的内容，其余属性则需要在整个视频文件加载完成后才执行。
更多内容请添加微信：madongweikai，或扫描下方二维码添加
音频、视频标记及属性码动未来教案篇
猜你喜欢
转载自blog.csdn.net/share_tiger/article/details/82899539
今日推荐
周排行