html中插入视频的常用方法有两种：使用
HTML中插入视频，最常用的方法就是使用
解决方案
立即学习“前端免费学习笔记（深入）”；
嵌入代码，通常是来自第三方视频平台（如youtube、b站）提供的，好处是省去了自己搭建视频服务器和处理兼容性的麻烦，直接利用平台的成熟服务。缺点是受限于平台的功能和样式，定制性较差，而且依赖于网络连接，如果平台出现问题，你的视频也会受到影响。
下面分别介绍这两种方法：
1. 使用
最基本的使用方法如下：
<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 属性：添加浏览器默认的播放控制条（播放/暂停、音量、进度条等）。
标签：指定视频的来源文件，可以提供多个 标签，以支持不同的视频格式。浏览器会选择它能播放的第一个格式。 - type 属性：指定视频的MIME类型，告诉浏览器视频的格式。常见的有 video/mp4、video/webm、video/ogg。
- “您的浏览器不支持 HTML5 视频。”：在不支持
进阶用法：
示例：
<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 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 属性：允许全屏播放。
如何选择？
- 如果你需要完全控制视频的样式和交互，并且有能力处理各种兼容性问题，那么使用
- 如果你只是想简单地嵌入一个视频，并且不关心样式和交互的定制，那么使用嵌入代码更方便快捷。
如何解决视频播放的兼容性问题？
这是个大坑。不同的浏览器支持的视频格式不一样，所以需要提供多种格式的视频，让浏览器选择它能播放的。通常需要提供MP4、WebM、Ogg三种格式。
- MP4： 兼容性最好，几乎所有浏览器都支持。
- WebM： Google开发的开源格式，在chrome、firefox、Opera等浏览器中支持较好。
- Ogg： 另一种开源格式，但支持度不如MP4和WebM。
可以使用视频转换工具将视频转换为不同的格式。例如，可以使用ffmpeg命令行工具，或者一些在线视频转换网站。
如何自定义
浏览器默认的播放器样式比较丑，而且各个浏览器之间也不一样，所以通常需要自定义播放器样式。
自定义播放器样式可以使用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” 表示不预加载。
- 懒加载： 对于不在首屏显示的视频，可以使用懒加载技术，只有当视频进入可视区域时才加载。
总的来说，插入视频到HTML中，看似简单，但要做好，需要考虑很多因素，包括兼容性、样式、性能等等。选择合适的方法，并根据实际情况进行优化，才能提供最佳的用户体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
