我们一起学：HTML5标签系列教程（一）-video标签

点击下一步，在”project name"中填写项目名称，本例为"video"，选择你的默认工作空间，或者服务器htdocs所在文件夹，别忘了文件夹后面要加上“/项目名”。

点“finish”完成项目创建。在新建的项目上右击，选择"New"，在弹出的菜单中选择“File”

在弹出的对话框中的“File name”文本框中，填写文件名：“index.html"，点Finish。

创建页面

打开刚创建的”index.html“文件，键入如下代码：

示例视频1 示例视频2

您的浏览器不支持video标签

下面是在浏览器中运行的效果截图：

是声明HTML5的标准格式。可以看出，比HTML 4.01和xhtml简单的多了，一个最简单的HTML5文档应该包含以下标签，与HTML 4.01基本一致：

内容

接着，进入正题，我们的”"标签。里面指定了一个”width“和”height“属性。用来指示浏览器应该为这个视频预留多少的空间，如果不指定该项，那么浏览器就不知道该如何为此视频分配多大的位置合适。controlls代表着在网页上浏览视频时，底部的控制条，包括”播放“按钮，”当前播放时间“， ”播放进度“，”总时间“，”音量“（看效果图）。

子标签定义了视频文件的存放地址，此例用的相对路径。需要在video项目下新建一个文件夹，名字为“movie”，然后把视频复制进去。在“src”属性中添加视频文件的路径，type表示该文件的MIME-TYPE由于浏览器对视频格式支持不现，具体如下表：

| Browser | MP4 | WebM | Ogg |

| :-- | :-- | :-- | :-- |

| Internet Explorer 9 | YES | NO | NO |

| Firefox 4.0 | NO | YES | YES |

| Google Chrome 6 | YES | YES | YES |

| Apple Safari 5 | YES | NO | NO |

| Opera 10.6 | NO | YES | YES |

例如：IE支持MP4格式，而Firefox不支持。我在代码中定义了两个不同的视频文件（注意，浏览该页面时，只能播放一个视频文件，标签不存在“播放列表”这一选项，要想实现此功能，要用Javascript实现），一个是movie2.mp4，type为“video/mp4”，一个是movie.ogg，type为"video/ogg"，目的是为了测试浏览器对视频格式的支持。在IE9中打开网页，会看到下图：

在Firefox中打开，会看到下图：

如果我删除”ogg“格式的标签，Firefox就会显示不支持的文件格式：

再下面一句话”您的浏览器不支持video标签“，是在用户浏览器不支持标签的情况下所要显示的提示文字。到现在，一个基本的”“标签的使用就结束了。下面给出了一些”“标签的一些属性的解释。

属性简介

video:

| 属性 | 取值 | 描述 |

| :-- | :-- | :-- |

| autoplayNew | autoplay | 页面加载后，且视频已缓冲完毕，则立即开始播放 |

| controlsNew | controls | 视频控制器是否显示，如（播放/暂停按钮） |

| heightNew | 像素值 | 设置播放器的高度 |

| loopNew | loop | 循环播放该视频 |

| mutedNew | muted | 视频播放时是否静音 |

| posterNew | URL | 视频缓冲时或播放结束后，播放器用一个图片来替代视频内容 |

| preloadNew | auto

metadata

none | 定义当页面加载完成后，视频是如何加载。auto自动加载整个视频，metadata只加载元数据，none不加载视频 |

| srcNew | URL | 视频文件URL地址 |

| widthNew | pixels | 播放器宽度 |

子标签 source:

| 属性 | 取值 | 描述 |

| :-- | :-- | :-- |
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题