html怎么嵌入视频？手把手教你轻松添加视频

本篇文章给大家分享《html怎么嵌入视频？超简单视频插入代码教程》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

HTML中插入视频的常用方法有两种：使用

HTML中插入视频，最常用的方法就是使用标签，当然，嵌入代码也是一种选择，各有优劣，具体用哪个，还得看你的需求和具体场景。

解决方案

标签是HTML5引入的，提供了原生的视频播放支持。它的优势在于简单直接，控制权完全掌握在开发者手中。但相对来说，需要自己处理各种兼容性问题，以及设计播放器的样式和交互。

嵌入代码，通常是来自第三方视频平台（如YouTube、B站）提供的，好处是省去了自己搭建视频服务器和处理兼容性的麻烦，直接利用平台的成熟服务。缺点是受限于平台的功能和样式，定制性较差，而且依赖于网络连接，如果平台出现问题，你的视频也会受到影响。

下面分别介绍这两种方法：

1. 使用标签

最基本的使用方法如下：

<video width="640"    style="max-width:100%" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频。
</video>

• width 和 height 属性：设置视频的宽度和高度。
• controls 属性：添加浏览器默认的播放控制条（播放/暂停、音量、进度条等）。
• 标签：指定视频的来源文件，可以提供多个 标签，以支持不同的视频格式。浏览器会选择它能播放的第一个格式。
• type 属性：指定视频的MIME类型，告诉浏览器视频的格式。常见的有 video/mp4、video/webm、video/ogg。
• "您的浏览器不支持 HTML5 视频。"：在不支持 标签的浏览器中显示的文本。

进阶用法：

• autoplay 属性：视频自动播放（慎用，用户体验可能不好）。
• loop 属性：视频循环播放。
• muted 属性：视频静音播放。
• poster 属性：指定视频封面图片。

示例：

<video width="640" height="360" controls poster="myvideo.jpg">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频。
</video>

2. 使用嵌入代码

以YouTube为例，在YouTube视频页面，点击“分享” -> “嵌入”，会生成一段