青少年编程与数学 01-005 超文本标记语言（HTML）14课题、视频
- 课题摘要
- 课题要求
- 一、视频
- 二、`<video>`: 视频元素
- 三、`<video>` 元素属性
- 四、`<video>` 元素事件
- 五、嵌入视频页面
- 六、练习
- 课题建议
- 课题作业
- 附录一、百度公司简介
本文介绍网页中使用视频的方法。
“视频不仅仅是娱乐，它是一种强大的教育工具，能够激发人们的想象力和创造力。
Video is not just entertainment; it is a powerful educational tool that can inspire people’s imagination and creativity.
—— 马文·明斯基 (Marvin Minsky) | 人工智能先驱 | 1927 ~ 2016”
“互联网视频正在改变我们获取信息和知识的方式，它让学习变得更加直观和有趣。
Internet video is changing the way we access information and knowledge, making learning more intuitive and interesting.
—— 尼尔·波兹曼 (Neil Postman) | 美国教育家、作家 | 1931 ~ 2003”
“视频内容的丰富性和多样性，为人们提供了无限的想象空间和创造可能。
The richness and diversity of video content provide people with unlimited space for imagination and creative possibilities.
—— 史蒂夫·乔布斯 (Steve Jobs) | 苹果公司联合创始人 | 1955 ~ 2011”
课题摘要
本文介绍网页中使用视频的方法。
课题要求
- 了解视频在网页中的重要意义。
- 掌握在网页中嵌入视频的方法。
视频应用广泛，当前的互联网应用中，视频越来越重要，比如抖音、快手、腾讯视频等应用。
一、视频
视频是一种视觉媒介，它通过连续的图像序列来模拟运动，通常伴随着声音，以传达信息、讲述故事或展示事件。视频可以是实时捕捉的，也可以是经过编辑和后期处理的。以下是视频的一些关键特点：
-
连续性：视频由一系列连续的帧组成，每秒钟可以包含多个帧，这些帧快速连续显示，创造出运动的错觉。
-
视觉内容：视频可以包含各种视觉内容，如自然景观、人物动作、动画等。
-
声音：除了视觉图像外，视频通常还包含声音，可以是对话、音乐、环境声音或其他音频效果。
-
技术格式：视频可以以多种格式存储和传输，包括但不限于MP4、AVI、MOV等。
-
应用领域：视频广泛应用于电影、电视、在线流媒体、教育、新闻报道、社交媒体和商业广告等领域。
-
数字化：现代视频通常是数字化的，可以通过计算机和互联网进行编辑、分享和播放。
-
交互性：某些视频内容允许用户交互，例如视频游戏或互动式教育视频。
-
存储和播放设备：视频可以在多种设备上播放，包括电视、计算机、智能手机和平板电脑等。
视频作为一种强大的交流工具，能够结合视觉和听觉元素，提供丰富的信息和沉浸式的体验。
二、<video>: 视频元素
HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
和 元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。
三、<video> 元素属性
HTML <video> 元素用于在网页上嵌入视频内容。以下是一些常用的 <video> 元素属性：
-
src: 指定视频文件的URL。这是必需的属性，用于告诉浏览器视频文件的位置。
-
controls: 添加一组播放控件，如播放/暂停按钮、进度条、音量控制等。当设置为
controls时，浏览器会提供默认的控件。 -
autoplay: 如果设置为
autoplay，视频将在页面加载后自动播放。 -
loop: 如果设置为
loop，视频将在播放结束后自动重新开始。 -
muted: 设置为
muted时，视频默认播放时没有声音。 -
poster: 指定一个图片的URL，作为视频的预览图像，在视频加载之前显示。
-
preload: 指示浏览器在页面加载时是否应该加载视频文件。可能的值为
none、metadata或auto。none表示不加载视频，metadata表示只加载元数据，auto表示加载整个视频。 -
width 和 height: 指定视频播放器的宽度和高度。
-
playsinline: 允许视频在移动设备上内联播放，而不是全屏播放。
-
crossorigin: 指定视频文件是否应该使用CORS（跨源资源共享）。
-
mediagroup: 将视频元素与同一媒体组中的其他媒体元素关联起来。
-
srcset: 允许提供多个视频源，浏览器将根据屏幕大小和其他条件选择最合适的源。
-
sizes: 提供一组源尺寸，允许浏览器根据屏幕大小和其他因素选择合适的尺寸。
-
type: 指定视频的MIME类型，例如
video/mp4。 -
disablepictureinpicture: 当设置为
disablepictureinpicture时，禁用画中画功能。
这些属性可以根据您的需要进行组合使用，以提供丰富的视频播放体验。请注意，不同的浏览器可能支持不同的属性和功能。
四、<video> 元素事件
事件名 触发时机
audioprocess (en-US)已弃用 The input buffer of a ScriptProcessorNode is ready to be processed.
canplay 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。
canplaythrough 浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete OfflineAudioContext 渲染完成。
durationchange duration 属性的值改变时触发。
emptied (en-US) 媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。
ended 视频停止播放，因为 media 已经到达结束点。
loadeddata media 中的首帧已经完成加载。
loadedmetadata 已加载元数据。
pause 播放已暂停。
play 播放已开始。
playing 由于缺乏数据而暂停或延迟后，播放准备开始。
progress 在浏览器加载资源时周期性触发。
ratechange (en-US) 播放速率发生变化。
seeked (en-US) 跳帧（seek）操作完成。
seeking (en-US) 跳帧（seek）操作开始。
stalled (en-US) 用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。
suspend (en-US) 媒体数据加载已暂停。
timeupdate currentTime 属性指定的时间发生变化。
volumechange (en-US) 音量发生变化。
waiting (en-US) 由于暂时缺少数据，播放已停止。
使用说明
浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
其他的使用注意事项：
如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。HTMLMediaElement 会激活许多不同的事件 ，以便于让你可以控制视频（和音频）内容。
你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。
五、嵌入视频页面
还可以把其他视频网站的视频嵌入到网页。看下面练习中的例子，嵌入了腾讯视频的播放页面。
六、练习
<!DOCTYPE html>
<html lang="zh-cn">
<title>HTML视频</title>
<meta charset="utf-8" />
<style>
body {
color: cyan;
background-color: teal;
}
.container {
width: 500px; /* 设置容器的宽度 */
margin: 0 auto; /* 将左右边距设置为自动 */
line-height: 2;
}
</style>
<body>
<div class="container">
<h1>视频：青少年成长管理 引言</h1>
<video width="320" height="240" controls="controls">
<source src="mp4/00 青少年成长管理 引言 (1).mp4" type="video/mp4" />
</video>
</div>
<div class="container">
<h1>腾讯视频：斗破苍穹第4季</h1>
<p style="text-align: center">
<!-- 下面的i0043frto05是视频ID -->
<iframe
class="video_iframe"
style="z-index: 1"
src="http://v.qq.com/iframe/player.html?vid=i0043frto05&width=500&height=375&auto=0"
allowfullscreen=""
frameborder="0"
height="375"
width="500"
></iframe>
</p>
</div>
</body>
</html>
需要时再详细掌握。
课题建议
- 通过视频网站观看视频，了解视频播放的实际要求。
课题作业
- 完成文档中的练习。
附录一、百度公司简介
百度公司（Baidu, Inc.）是中国领先的互联网科技公司，也是全球最大的中文搜索引擎服务商。百度成立于2000年1月1日，由李彦宏和徐勇共同创立，总部位于中国北京中关村。百度的核心业务围绕搜索引擎展开，通过其强大的搜索算法和海量的索引数据库，为全球超过100个国家和地区的用户提供中文信息检索服务。
除了搜索引擎，百度还涉足了人工智能（AI）、云计算、大数据、自动驾驶、智能硬件、在线广告、地图服务、在线视频、音乐、新闻、教育、医疗健康、金融等多个领域，形成了多元化的产品和服务矩阵。
百度在人工智能领域投入巨大，特别是在自然语言处理、图像识别、深度学习等方面取得了显著成果。百度的AI开放平台为开发者和企业提供了一系列的AI能力，促进了人工智能技术的广泛应用。
百度的愿景是成为最懂用户，并能帮助人们成长的全球顶级高科技公司。这一愿景体现了百度致力于通过技术创新改善人们生活，提升用户体验的长期目标。
百度在全球范围内拥有数万名研发工程师和员工，其中不乏顶尖的技术人才，这使得百度在技术上保持了领先地位。百度不仅在中国市场占据主导地位，在全球范围内也与谷歌、微软等国际巨头竞争，特别是在中文信息处理领域，百度拥有独特的优势。
百度公司还在全球范围内进行了多项战略投资和合作，旨在进一步拓展其业务版图和影响力，强化其在互联网和人工智能领域的领导地位。
