Educoder – Web程序设计基础2021秋 --实训作业全总结
web程序设计基础R实验报告 2021年 —太原理工大学
一、 播放视频
第1关:HTML5视频相关的概念
1、HTML5不支持的视频格式是( )。
D、flv
2、用于播放HTML5视频文件的元素是( )
C、<video>
3、下列选项中,( )是safari浏览器支持的video元素的视频文件格式
B、mp4
4、下列选项中,不属于video元素的属性是( )
A、load
5、video元素是HTML5中新增的视频元素,该元素的( )属性可以实现视频加载完成后自动播放。
A、autoplay
第2关:播放视频
1、编程要求
在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 使用HTML5的video元素添加一个视频播放器,在video元素的开始和结束标签之间添加说明文字"你的浏览器不支持该视频格式"
- 播放的视频文件URL为“https://www.educoder.net/api/attachments/1248122”
- 添加autoplay属性,使视频可以自动播放
- 设置视频播放器的宽度为450,高度为260。
页面效果如下:
2、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5-视频</title>
</head>
<body>
<h1 align="center">我和我的祖国</h1>
<br/>
<div align="center">
<!-- ********* Begin ********* -->
<video src="https://www.educoder.net/api/attachments/1248122" controls="controls" autoplay="autoplay" width="450" height="260">
你的浏览器不支持该视频格式</video>
<!-- ********* End ********* -->
</div>
</body>
</html>
二、 播放音频
第1关:HTML5音频相关的概念
1、在下列选项中,( )不是HTML 5所支持的音频格式。
B、voc
2、下列选项中,可用来为同一个媒体数据指定多个播放格式与编码方式的标签是( )。
A、source
3、audio元素中src属性的作用是( )。
C、
设置要播放音频的URL
4、给audio标签添加auto属性,可使音频在就绪后马上播放。
B、错误
5、下列选项中,哪些是Chrome浏览器支持的audio元素的音频文件格式( )(此题为多选)
A、mp3
C、ogg
第2关:播放音频
编程要求
在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 使用HTML5的audio元素添加一个音乐播放器,在audio元素的开始和结束标签之间添加说明文字"你的浏览器不支持该音频格式"
- 播放的音频文件URL为“https://www.educoder.net/api/attachments/2364090”
- 添加autoplay属性,使音频可以自动播放
- 添加loop属性,使音频可以循环播放。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5-音频</title>
</head>
<body>
<h1 align="center">安妮的仙境</h1>
<br/>
<div align="center">
<!-- ********* Begin ********* -->
<audio src="https://www.educoder.net/api/attachments/2364090" loop="loop" autoplay="autoplay" controls="controls" >
你的浏览器不支持该音频格式</audio>
<!-- ********* End ********* -->
</div>
</body>
</html>