知识：H5中<video> 标签的知识

Posted 2023-05-11

参考技术A <video> 允许你轻松地嵌入一段视频。一个简单的例子如下：

在标签中 的 source 可以指定多种类型的媒体内容。

像 MP3、MP4、WebM 这些 视频格式，定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

比如：一个格式为 WebM 的电影包含了

其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道；
音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道；
文字轨道包含英语和西班牙语的字幕轨道，如下图所示：

音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。

不同的浏览器支持不同的视频和音频格式, 例如:

一般来说，在页面里签入 <video>标签，结合一些播放器来使用。比如 https://github.com/bilibili/flv.js 等。

END

https://developer.mozilla.org/zh-CN/docs/Learn/html/Multimedia_and_embedding/Video_and_audio_content

初入web知识点

◆HTML5标签
video视频（主要格式MOEG4） audio音频（主要格式MP3）
<video src="地址"></video> <audio src="地址"></audio>
*标签属性（主要）
①autoplay 自动播放
②controls 显示控件
③loop 循环播放
◆块级元素和行内元素
块级元素 行内元素

独占一行 不独占一行
可设宽高 不可设宽高
内容大小影响不影响元素大小 内容大小不影响不影响元素大小
可嵌套行内和会计元素 嵌套行内和会计元素会让行内显示错乱
四方向margin有变化 四方向margin只有左右有变化
◆HTML语义化标签
article 文章
（也可直接使用的标签） aside 侧边栏 footer页脚 header页眉 nav导航 section章、节
◆◆CSS:层叠样式表
定义HTML元素的显示形式，一种格式化网页内容的技术
◆样式规则：
①内嵌样式：在开始标签内潜入CSS <div style=""> </div> 也可叫内联
②内部样式：在head中输入 <style type=""> </style>
③外部样式：新建文件 选择CSSsheet并编辑 在head中输入 <link rel="" href="CSS文件的地址">
④@important：通过@important链接，只出现在CSS文件中
优先级别：内嵌级别最高 内部和外部 要看位置 谁的位置在上面，谁就高级

◆CSS基础语法
①多个声明用；隔开
②每条声明由一个属性和一个值组成
③属性和值用：分开
④选择器分组用，分开
◆CSS权重值
每个等级的值为其所代表的选择器的个数乘以这一等级的权重值，最后把所有等级的值相加得出选择器的特殊值
第一等级：内联样式（内嵌） 权重值 1000
第二等级：ID选择器 权重值 0100
第三等级：类、伪类选择器 权重值 0010
第四等级：元素、伪元素选择器 权重值 0001
通用选择器 * 子选择器 > 相邻兄弟选择器 + 权重值0000
这里所有的权重值相加不是二进制
TIP： important本身没有权重值，但是如果有它的存在，会让其他所有的权重失效从而使自己的权重值达到最高
◆CSS样式
CSS背景：background 注意前景的区别
background-size是CSS3的 有时简写是会显示不出来，需要单独出来写
CSS文本：定义文本外观，用来改变文本的颜色、间距……
文本属性：①color 颜色 后面直接跟颜色单词/十六进制颜色/rgb
◇扩充：rgb是red green blue 的意思 因为这是颜色的三种基本色 比如:rgb(255,0,0)是红色 rgb(0,0,0)是黑色 rgb（255，255，255）是白色
②direction 文本方向：rtl（right to left）从右至左 ltr inherit
③line-height：多用来实现垂直居中
④text-align： 文本距左/中/右 多用来实现水平居中
⑤text-decoration：文本修饰 属性：none 默认 underline下划线 overline上划线 line-through删除线 blink 闪烁
可以用来删除a标签的下划线 a｛text-decoration:none｝
◇扩充：图片遮盖技术 ①看似图片，实则是标题 ② 回到首页 ③ 用text-decoration实现
⑥text-transform :控制元素中的字母 常用属性;uppercase大写字母 lowercase小写字母 多用于不区分大小写的验证码。
CSS字体：
font： family字体的系列 size大小 style：风格 weight：粗细
CSS列表：
list-style-type:none 去掉无序列表的点
也可以用list-style-type来改变无序列表的样式 可以是图片
CSS表格:
border-collapse:collapse来实现表格变成单边框
caption-side标题的位置
CSS轮廓：
outline ： color style width