使用 HTML 标签播放 YouTube 视频

youtube 视频" /> 标签播放 youtube 视频" />

本文介绍了如何使用 HTML5 的 `

使用 <video> 标签播放 YouTube 视频

HTML5 的 <video> 标签提供了一种在网页中嵌入视频的强大方式。然而，直接将 YouTube 视频的嵌入链接（例如 https://www.youtube.com/embed/qh91xRArCwk）作为 <video> 标签的 src 属性值是行不通的。这是因为 src 属性期望的是视频文件（例如 .mp4），而不是一个包含视频的网页。

解决方案：下载 YouTube 视频

要解决这个问题，你需要先将 YouTube 视频下载为 .mp4 文件。有很多在线工具可以帮助你完成这项任务。例如，GetVideo 就是一个不错的选择。

下载完成后，你就可以将下载的 .mp4 文件放置在你的服务器上，并使用 <video> 标签引用它。

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

代码示例

以下是一个使用 <video> 标签播放本地 .mp4 文件的示例代码：

标贝AI虚拟主播

一站式虚拟主播视频生产和编辑平台

15

查看详情

<video width="320" height="240" autoplay muted loop controls>
  <source src="your-video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

代码解释：

• width 和 height 属性指定视频的宽度和高度。
• autoplay 属性使视频在加载后自动播放。
• muted 属性使视频静音播放，这在某些浏览器上允许自动播放。
• loop 属性使视频循环播放。
• controls 属性显示视频播放控件（例如播放/暂停按钮、音量控制）。
• <source> 标签指定视频文件的路径和类型。
• 您的浏览器不支持 HTML5 视频。 是在浏览器不支持 <video> 标签时显示的备用文本。

注意事项：

• 确保将 your-video.mp4 替换为你实际的视频文件名。
• 将视频文件放置在你的服务器上，并确保 <source> 标签中的 src 属性指向正确的文件路径。
• 某些浏览器可能需要 muted 属性才能允许自动播放，尤其是在移动设备上。
• controls 属性可以根据需要移除，以便自定义视频播放控件。

解决移动端自动播放问题

在移动设备上，自动播放视频通常受到限制，以节省用户的流量和电量。为了解决这个问题，你可以尝试以下方法：

• 添加 muted 属性： 许多浏览器要求视频在自动播放时静音。
• 使用 playsinline 属性： 对于 iOS 设备，添加 playsinline 属性可以防止视频全屏播放。

<video width="320" height="240" autoplay muted loop controls playsinline>
  <source src="your-video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

总结

虽然不能直接使用 YouTube 嵌入链接在 <video> 标签中播放视频，但通过下载视频文件并使用 <video> 标签的 src 属性引用它，可以实现这一目标。此外，通过添加 muted 和 playsinline 属性，可以解决移动端自动播放问题。请务必遵守 YouTube 的服务条款，并尊重视频版权。

以上就是使用 HTML 标签播放 YouTube 视频的详细内容，更多请关注php中文网其它相关文章！