Web网页设计作业记录音频和视频文件的插入

只爱圣女果

2024-04-14 帮助1人

作业涉及到的相关知识及工具：
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>&nbsp;</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都可以正常预览。

小结

遇到问题首先自己得善于去查找，尤其是实践性的学习，我们不能只是看看就行了，照搬别人的代码同样如此，倘若自己如果不能真正理解，那也只是照搬，我们要做的应该是从别人的经验中去学习积累和借鉴形成自己的经验，为自己以后的学习积累少走弯路。 ——我在CSDN修仙的日子
最后就是如果有问题和错误，欢迎各位路过的大神们斧正。

这篇好文章是转载于：学新通技术网

Web网页设计作业记录音频和视频文件的插入

Task1:将mp4文件插入作为背景音频

问题记录和疑惑：

Task2：插入mp3音频和封面，保留播放控件

Task3：插入mp4，要求两种播放方式，出现播放控件和鼠标移入播放移出播放暂停。

存在的一些问题

小结

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐