【案例引入】

2021年6月17日，长征二号F遥十二运载火箭发射成功，将神舟十二号载人飞船送入预定轨道。随后，神舟十二号载人飞船与天和核心舱完成自主快速交会对接，3名航天员顺利进驻天和核心舱。“我们不仅要把核心舱这个‘太空家园’布置好，还要开展一系列关键技术验证”“作为指令长，我会团结带领乘组，严密实施、精心操作，努力克服一切困难”“我们有底气、有信心、有能力完成好此次任务”……16日上午，执行神舟十二号载人飞行任务的3名航天员在酒泉卫星发射中心问天阁与中外媒体记者集体见面。航天员聂海胜坚定的话语向世人传递出必胜的信心。本次任务航天员乘组选拔按照“新老搭配，以老带新”的方式，结合航天员飞行经历、相互协同能力等方面，选拔出飞行乘组和备份航天员。航天员聂海胜参加过神舟六号、神舟十号载人飞行任务，航天员刘伯明参加过神舟七号载人飞行任务，航天员汤洪波是首次飞行。对此，本次任务周密制定了航天员训练方案和计划，扎实开展了地面训练和任务准备，每名航天员训练均超过了6 000学时。特别是针对空间站技术、出舱活动、机械臂操控、心理以及在轨工作生活开展了重点训练。“这次任务出舱活动时间大幅增加，任务更加复杂，为此，我们进行了严格、系统、全面的训练，特别是穿着我国研制的新一代舱外航天服，我们更加有信心应对各种挑战。”航天员刘伯明说。首次亮相的航天员汤洪波说，经过11年的学习训练和磨砺考验，已经完成了从航空到航天这一艰苦难忘的转型，经过一轮又一轮严格科学的选拔，对自己充满信心，也十分期待有朝一日能和来自世界其他国家的航天员一起遨游“天宫”。

【案例分析】

通过案例的引入，感受到我们国家航天事业的迅速发展，航天人的默默付出，以及为航天事业做出巨大牺牲的航天前辈，都是我们学习的榜样。同时也希望激起同学们热爱科学、热爱祖国、热爱人民，立志学好专业知识的决心。

【主要知识点】

与音频文件播放方式一样，大多数视频文件在网页上也是通过插件来播放的。例如常见的播放插件为Flash，但由于不是所有的浏览器都拥有同样的插件，所以就需要一种统一的包含视频的标准方法，为此，与HTML4相比，HTML5新增了video标签。

7.2.1　video标签概述

video标签主要是定义播放视频文件或者视频流的标准。它支持3种视频格式，分别为Ogg，、WebM和MPEG 4。

如果需要在HTML5网页中播放视频，输入的基本格式如下：

案例【7.2.1】视频播放

图7.2.1　插入视频

效果如图7.2.1所示。

7.2.2　video标签的属性（表7.2.1）

表7.2.1　video标签的属性

7.2.3　在网页中添加视频文件

当在网页中添加视频文件时，用户可以根据自己的需要添加不同类型的视频文件，如添加自动播放的视频文件、添加带有控件的视频文件、添加循环播放的视频文件等，另外，还可以设置视频文件的高度和宽度。

1）添加自动播放的视频文件

autoplay属性规定一旦视频就绪则马上开始播放。如果设置了该属性，视频将自动播放。

案例【7.2.2】插入自动播放视频

微课7.2　插入视频

效果如图7.2.2所示。

图7.2.2　插入视频

2）添加带有控件的视频文件

controls属性规定浏览器应该为视频提供播放控件。如果设置了该属性，则规定不存在设置的脚本控件。其中，浏览器控件应该包括播放、暂停、定位、音量、全屏切换等。

案例【7.2.3】添加控件视频

效果如图7.2.3所示。

图7.2.3　添加控件视频(www.daowen.com)

3）添加循环播放的视频文件

loop属性规定当视频结束后将重新开始播放。如果设置该属性，则视频将循环播放。

案例【7.2.4】循环播放视频

效果如图7.2.4所示。

4）添加预播放的视频文件

preload属性规定是否在页面加载后载入视频。如果设置了autoplay属性，则忽略该属性。preload属性的值可能有三种，分别说明如下：

auto：当页面加载后载入整个视频。

meta：当页面加载后只载入元数据。

none：当页面加载后不载入视频。

案例【7.2.5】预播放视频

图7.2.4　循环播放视频

效果如图7.2.5所示。

图7.2.5　预播放视频

5）设置视频的宽度与高度

使用height和width属性可以设置视频文件的显示高度与宽度，单位是像素。

案例【7.2.6】视频宽高设置

效果如图7.2.6所示。

图7.2.6　视频宽高设置

注意：如果设置这些属性，在页面加载时会为视频提示预留出空间。如果没有设置这些属性，浏览器就无法为视频保留合适的空间，并且在页面加载的过程中，其布局也会产生变化。不能通过height和width属性来缩放视频。通过height和width属性来缩小视频，用户仍会下载原始的视频（即使在页面上它看起来较小）。正确的方法是在网页上使用该视频前，用软件对视频进行压缩。

【课程育人】

案例引入与在网页中插入视频的学习总结如下：

1.通过插入“神舟十二号载人飞船”视频的学习，培养热爱科学、热爱国家的民族自豪感。

2.通过“神舟十二号航天人故事”视频的学习，培养向科学高峰攀登，立志学好专业知识，为国家建设添砖加瓦的奋斗精神。

【课堂互动】

1.video标签主要是定义播放视频文件或者视频流的标准。它支持3种视频格式，分别为（　）。（多选）

A.Ogg　B.WebM　C.Mpeg 4　D.WAV

2.下列属于video属性的属性值有（　）。（多选）

A.Preload　B.Width　C.Poster　D.Controls

3.Controls属性规定浏览器应该为视频提供播放控件。如果设置了该属性，则浏览器控件包括（　）。（多选）

A.播放　B.暂停　C.音量　D.全屏切换