html中如何插入视频视频嵌入代码教学-html教程-PHP中文网

html中如何插入视频视频嵌入代码教学

冰火之心

发布： 2025-06-22 16:57:02

原创

1755人浏览过

html中插入视频的常用方法有两种：使用<video>标签或嵌入第三方代码。前者由html5提供，支持原生播放，允许高度定制但需处理兼容性和样式设计；后者来自youtube等平台，简便快捷但定制性差且依赖平台稳定性。具体选择取决于需求和场景。解决兼容性问题需提供mp4、webm、ogg多种格式。自定义播放器样式可通过css和javascript实现，如隐藏默认控件、美化界面和控制行为。优化加载速度的方法包括压缩视频、使用cdn、流媒体、设置预加载和懒加载技术。综合考虑这些因素可提升用户体验。

html中如何插入视频视频嵌入代码教学

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

解决方案

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

立即学习“前端免费学习笔记（深入）”；

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

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

1. 使用<video>标签

最基本的使用方法如下：

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

登录后复制

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

进阶用法：

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

示例：

模力视频

模力视频 - AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板

查看详情

<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视频页面，点击“分享” -> “嵌入”，会生成一段 <iframe> 代码，直接复制粘贴到你的HTML文件中即可。

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

登录后复制

src 属性：指定YouTube视频的URL，VIDEO_ID 替换成实际的视频ID。
frameborder 属性：设置边框，通常设置为0。
allow 属性：设置允许的权限，根据需要进行调整。
allowfullscreen 属性：允许全屏播放。

如何选择？

如果你需要完全控制视频的样式和交互，并且有能力处理各种兼容性问题，那么使用 <video> 标签是更好的选择。
如果你只是想简单地嵌入一个视频，并且不关心样式和交互的定制，那么使用嵌入代码更方便快捷。

如何解决视频播放的兼容性问题？

这是个大坑。不同的浏览器支持的视频格式不一样，所以需要提供多种格式的视频，让浏览器选择它能播放的。通常需要提供MP4、WebM、Ogg三种格式。

MP4： 兼容性最好，几乎所有浏览器都支持。
WebM： Google开发的开源格式，在Chrome、Firefox、Opera等浏览器中支持较好。
Ogg： 另一种开源格式，但支持度不如MP4和WebM。

可以使用视频转换工具将视频转换为不同的格式。例如，可以使用FFmpeg命令行工具，或者一些在线视频转换网站。

如何自定义`<video>`标签的播放器样式？

浏览器默认的播放器样式比较丑，而且各个浏览器之间也不一样，所以通常需要自定义播放器样式。

自定义播放器样式可以使用CSS和JavaScript来实现。

隐藏默认的控制条： 可以使用 controlsList="nodownload nofullscreen noremoteplayback" 隐藏默认的控制条，或者直接不加 controls 属性。
使用CSS美化： 可以使用CSS来设置播放器的各个元素的样式，例如按钮、进度条、音量条等。
使用JavaScript控制： 可以使用JavaScript来控制视频的播放、暂停、音量等。

这部分比较复杂，需要一定的前端开发经验。可以参考一些开源的HTML5视频播放器，例如Video.js、Plyr等，学习它们的实现方式。

如何优化视频的加载速度？

视频文件通常比较大，加载速度会影响用户体验。可以采取以下措施来优化视频的加载速度：

压缩视频： 使用视频压缩工具减小视频文件的大小。
使用CDN： 将视频文件放在CDN上，让用户从离他们最近的服务器上下载视频。
使用流媒体： 将视频文件转换为流媒体格式（例如HLS、DASH），让用户可以边看边下载。
设置预加载： 使用 preload 属性来设置视频的预加载方式。preload="auto" 表示自动预加载，preload="metadata" 表示只预加载元数据，preload="none" 表示不预加载。
懒加载： 对于不在首屏显示的视频，可以使用懒加载技术，只有当视频进入可视区域时才加载。