Web前端最全我们一起学：HTML5标签系列教程（一）-video标签，2024年最新前端面试题2024

最新推荐文章于 2024-08-05 09:00:00 发布

2301_77595001

最新推荐文章于 2024-08-05 09:00:00 发布

阅读量510

点赞数 9

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_77595001/article/details/138986186

版权

程序员专栏收录该内容

490 篇文章 0 订阅

订阅专栏

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

疯狂编程
学习效果可视化
写博客
阅读优秀代码
心态调整

然后在弹出的对话框中选择”Default Project“。这个项目中不包含任何文件，我们需要写自己的html文件，因为我们是为了学习HTML5标签，所以最好先不要用自带的HTML5模板来创建项目。

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

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

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

创建页面

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

HTML5 video标签示例视频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中打开网页，会看到下图：