项目1-5 制作含有视频音频的网页
学习任务
制作含有音频和视频的网页
学习目标
1.掌握视频标记及常用属性
2.掌握音频标记及常用属性
观看视频
下载素材
视频标记<video>
在HTML5中，video标签用于播放视频，它支持三种视频格式，分别为Ogg、WebM和MPEG4，其基本语法格式如下：
<video src="视频文件路径" controls="controls"></video>
其中 ，src属性用于设置视频文件的路径，controls 属性用于为视频提供播放控件。
属性 | 值 | 描述 |
autoplay | autoplay | 当页面载入完成后自动播放视频。 |
loop | loop | 视频结束时重新开始播放。 |
preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
poster | url | 当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。 |
代码示例
1. <video src="video/wulianshan.mp4" controls="controls">
您的浏览器不支持video标签
</video>
2. <video src="video/wulianshan.mp4" controls="controls" autoplay="autoplay" muted="muted">
您的浏览器不支持video标签
</video>
关于视频自动播放的问题，同学们可能发现，加了autoplay,也不能自动播放，这是谷歌浏览器特意这样设计的。相对来讲，这是一种比较人性化的设计，禁止自动播放，而由用户决定是否播放，免得在某些安静的公共场合，用户打开一个网页，突然播放出声音，影响他人。
如果就是要自动播放，有一种方法是增加muted属性。加了muted属性后，能自动播放，但是静音，可以手动解除静音。
说明：
不同的浏览器显示效果有差异，我的测试案例在谷歌浏览器中不自动播放，360浏览器可以自动播放。
3. <video src="video/wulianshan.mp4" controls="controls" poster="images/20190929.jpg">
您的浏览器不支持video标签
</video>
4. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签。
</video>
5.多学一招：track添加字幕
音频标记<audio>
在HTML5中，audio标签用于播放音频，它支持三种音频格式，分别为Ogg、wav和MP3，其基本格式如下：
<audio src="音频文件路径" controls="controls"></audio>
其中，src属性用于设置音频文件的路径，controls 属性为音频提供播放控件。
属性 | 值 | 描述 |
autoplay | autoplay | 当页面载入完成后自动播放音频。 |
loop | loop | 音频结束时重新开始播放。 |
preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
代码示例
1.<audio src="music/qiluyao.mp3" controls="controls">
您的浏览器不支持audio标签
</audio>
齐鲁谣
作词：张积强
作曲：赵新
演唱：皓天
拂开历史的的尘封
浮现熟悉的笑容
虽说那都是逝去的身影
我的心却依然情动
往事不再如烟
记忆却依然升腾
齐鲁圣贤如繁星
诸子百家传美名
可听见杏坛上的朗读声
可看见遒媚健秀的行书
可听见漱玉泉边的吟诵
可看见诸葛摇扇的神通
可听见沙场点兵的呼声
可看见扁鹊行医的足迹
可听见稷下学子的争鸣
可看见浮来山上的雕龙
岁月不再停留
血脉依然贯通
文明之光耀千秋
薪火相传赞太平
2.不显示控件，作为背景音乐循环播放。
<audio src="music/qiluyao.mp3" autoplay="autoplay" loop="loop">
不使用控件，自动播放，循环播放，可作背景音乐
</audio>
说明：谷歌浏览器已经 禁用autoplay属性，若想要音乐自动播放，需要写一段javascript代码。
但是运行以后，需要点击一下页面，产生交互才能使音乐播放。
<body>
<audio id="media" src="mp4/qiluyao.mp3"></audio>
<script type="text/javascript">
window.onload = function() {
setInterval("toggleSound()", 100);
}
function toggleSound() {
var music = document.getElementById("media"); //获取ID
if (music.paused) { //判读是否播放
music.paused = false;
music.play(); //没有就播放
}
}
</script>
</body>
3.<audio controls>
<source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持audio标签
</audio>
鲁公网安备 37110202000410号
老师我是第一个。
老师我是第二个！
楼上的。。。。。。
楼上的全部扣一分