Web网页设计作业记录：音频和视频文件的插入
- 作业涉及到的相关知识及工具：
1、Dreamweaver 2020
2、audio和video标的使用及相关的属性和方法
(1)audio标签的相关基本属性及方法:
controls——是否显示音频文件的播放控件
autoplay——是否自动播放音频文件
loop——是否循环播放
muted——是否静音
(2)video标签及方法
基本属性和audio相同，这里不再重复介绍，作业涉及到video的两个方法分别是pause和play
Task1:将mp4文件插入作为背景音频
<audio preload="none" autoplay="autoplay" >
<source src="images/music.mp3" type="audio/mp3">
</audio>
- ps：关于preload——是否预加载音频
属性值：
none——不需要预加载
auto——页面加载后自动加载整个音频
metadata——只加载元数据（文件大小，时长信息)
问题记录和疑惑：
出现的问题：
在最后打开网页测试时发现autoplay属性并不能自动播放，且浏览器并未显示错误 (一度以为是自己对属性的理解有误），最后畅游了各大技术网站后发现这个问题和预览最终效果的浏览器有关。T_T（整得人心态炸裂）
最后，Edge、谷歌等浏览器是不支持音乐自动播放的，360、qq浏览器都是允许自动播放音乐的。
点击这里参考知乎的详细解答
我的疑惑：autoplay和autostart属性有什么具体的区别，目前还没有找到详细的答案，有知道的小伙伴欢迎转到留言区。
Task2：插入mp3音频和封面，保留播放控件
<ul>
<li>封面</li>
</ul>
<p><img src="images/the sky city.jpeg" width="400" height="320" alt=""/></p>
<ul>
<li>歌名：《天空之城》</li>
</ul>
<audio preload="none" controls="controls" >
<source src="images/music.mp3" type="audio/mp3">
</audio>
- ps：这个应该没什么难度了，主要就是注意一下要保留
controls这个属性才可以看到音频的播放进度条。
Task3：插入mp4，要求两种播放方式，出现播放控件和鼠标移入播放移出播放暂停。
<body>
<p>1、交互式控制</p>
<p> </p>
<video width="500" height="500" controls="controls" >
<source src="images/nut show.mp4" type="video/mp4">
</video>
<p>2、鼠标移入移出控制</p>
<video height="500" width="500" onMouseOut="this.pause()" onMouseOver="this.play()" >
<source src="images/nut show.mp4" type="video/mp4">
</video>
</body>
- 1、第一种播放方式没什么难度，比照mp3添加controls出现控制进度条就好了。
- 2、第二种要添加鼠标移入
onMouseOut和鼠标移出onMouseOver属性（Dreamweaver的话先选中mp4在窗口的行为里添加） 为两个属性设置方法，this调用pause和play
存在的一些问题
- 同样，第一种播放效果各大浏览器都正常，但是在第二种鼠标移入移出播放效果时，微软自带的Edge浏览器又抽风了（IE正常），它并不会立马在鼠标移入画面就播放，需要用户点击一次触发后，移入移出功能才正常。最后就换qq浏览器预览或者IE都可以正常预览。
3064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
