html中的视频标签,在div+css布局的网页中如何加入视频?

新建一个html文件,命名为test.html,用于讲解在div+css布局的网页中如何加入视频。

使用video标签来实现。在video标签内可以设置视频的大小、播放方式等,在source标签内设置视频的路径。

使用object标签来实现。在object标签内,同样可以设置视频的大小,data属性是视频的路径。

使用embed标签来实现。在embed标签内,通过src设置视频的路径。

video、object、embed三个标签视频的路径不仅支持相对路径,而且支持其他远程链接视频路径(如优酷、爱奇艺等)。

video、object、embed三个标签对不同的浏览器存在不同的兼容问题,在实际使用中,一般将三个标签整合写在一起,以达到最好的兼容性。

在浏览器打开test.html文件,查看播放视频的效果。

一、html5中的新标签

:定义外部的内容,这些内容独立于文档的其余部分; :定义其所处内容之外的内容; :定义声音,比如音乐或其他音频流; :允许设置一段文本,使其脱离其父元素的文本方向设置; :定义图形,比如图表和其他图像,它只是图形容器,必须使用脚本来绘制图形; :可以定义命令按钮,比如单选按钮、复选框或按钮; :定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值; :用于描述文档或文档某个部分的细节; :定义嵌入的内容,比如插件;: 定义元素的标题;:规定独立的流内容,如图像、图表、照片、代码等等;:定义 section 或 document 的页脚;:定义文档的页眉(介绍信息);:用于对网页或区段的标题进行组合;:规定用于表单的密钥对生成器字段;:定义带有记号的文本,请在需要突出显示文本时使用 < m> 标签;:定义度量衡,仅用于已知最大和最小值的度量;:定义导航链接的部分;:定义不同类型的输出,比如脚本的输出;:定义运行中的进度(进程);:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容;:定义字符的解释或发音;:定义 ruby 注释;:定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分;< source> :包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。;< time> :为诸如 video 元素之类的媒介规定外部文本轨道;< video> `:定义视频,比如电影片段或其他视频流;

二、HTML5新属性

:bool类型,规定是否允许用户编辑内容;:规定元素的上下文菜单;:创作者定义的属性,HTML 文档的创作者可以定义他们自己的属性,必须以 “data-” 开头;:规定是否允许用户拖动元素;:规定该元素是无关的,被隐藏的元素不会显示;:用于组合元素;:用于组合项目;:规定是否必须对元素进行拼写或语法检查;:规定元素对应的项目;

三、Window 事件属性

:在打印文档之后运行脚本;:在文档打印之前运行脚本;:在文档加载之前运行脚本;:当错误发生时运行脚本;:当文档改变时运行脚本;:当触发消息时运行脚本;:当文档离线时运行脚本;:当文档上线时运行脚本;:当窗口隐藏时运行脚本;:当窗口可见时运行脚本;:当窗口历史记录改变时运行脚本;:当文档执行再执行操作时运行脚本;:当调整窗口大小时运行脚本;:当文档加载加载时运行脚本;:当 Web Storage 区域更新时,存储空间中的数据发生变化时;:当用户离开文档时运行脚本;

四、表单事件

:当触发上下文菜单时运行脚本;:当表单改变时运行脚本;:当表单获得用户输入时运行脚本;:当元素获得用户输入时运行脚本;:当元素无效时运行脚本;

五、键盘事件

:当按下按键时运行脚本;:当按下并松开按键时运行脚本;:当松开按键时运行脚本;

六、鼠标事件

:当拖动元素时运行脚本;:当拖动操作结束时运行脚本;:当元素被拖动至有效的拖放目标时运行脚本;:当元素离开有效拖放目标时运行脚本;:当元素被拖动至有效拖放目标上方时运行脚本;:当拖动操作开始时运行脚本;:当被拖动元素正在被拖放时运行脚本;:当转动鼠标滚轮时运行脚本;:当滚动元素滚动元素的滚动条时运行脚本;

七、媒介事件

:当媒介能够开始播放但可能因缓冲而需要停止时运行脚本;:当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本;:当媒介长度改变时运行脚本;:当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本;:当媒介已抵达结尾时运行脚本;:当在元素加载期间发生错误时运行脚本;:当加载媒介数据时运行脚本;:当媒介元素的持续时间以及其他媒介数据已加载时运行脚本;:当浏览器开始加载媒介数据时运行脚本;:当媒介数据暂停时运行脚本;:当媒介数据将要开始播放时运行脚本;:当媒介数据已开始播放时运行脚本;:当浏览器正在取媒介数据时运行脚本;:当媒介数据的播放速率改变时运行脚本;:当就绪状态(ready-state)改变时运行脚本;:当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本;:当媒介元素的定位属性为真且定位已开始时运行脚本;:当取回媒介数据过程中(延迟)存在错误时运行脚本;:当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本;:当媒介改变其播放位置时运行脚本;:当媒介改变音量亦或当音量被设置为静音时运行脚本;:当媒介已停止播放但打算继续播放时运行脚本;

这些就是HTML的标签

基本

< html> …< /html> 定义 HTML 文档

< head> …< /head> 文档的信息

< meta> HTML 文档的元信息

< title> …< /title> 文档的标题

< link> 文档与外部资源的关系

< style> …< /style> 文档的样式信息

< body> …< /body> 可见的页面内容

< !–…–> 注释

文本

< h1> …< /h1> 标题字大小

(h1~h6)< b> …< /b> 粗体字

< strong> …< /strong> 粗体字(强调)

< i> …< /i> 斜体字

< em> …< /em> 斜体字(强调)

< u> …< /u> 下划线

< del> …< /del> 删除线(表示删除)

< center> …< /center> 居中文本(HTMl5已不支持center标签,可用样式text-align:center代替)

< ul> …< /ul> 无序列表

< ol> …< /ol> 有序列表

< li> …< /li> 列表项目

< a href=”…”> …< /a> 超链接

< font> 定义文本字体尺寸、颜色、大小

< sub> 下标< sup> 上标< br> 换行< p> 段落

图形

< img src=’”…”> 定义图像

< hr> 水平线

表格

< table> …< /table> 定义表格

< th> …< /th> 定义表格中的表头单元格

< tr> …< /tr> 定义表格中的行

< td> …< /td> 定义表格中的单元

其它

< form> …< /form> 定义供用户输入的 HTML 表单

< frame> 定义框架集的窗口或框架

想学更多前端知识,可以关注中公优就业。