HTML视频标签显示Youtube视频

Posted 2023-02-24

【中文标题】HTML视频标签显示Youtube视频

【英文标题】：HTML video tag display Youtube video

【发布时间】：2015-10-01 02:53:03

【问题描述】：

我有一些 youtube 网址，例如 https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg。当我把它放到 html video 标签上时，它说“Invalid source”。

如何解决这个问题？

当我使用 iframe 显示视频时，我遇到了另一个问题，如下所述：Video not showing in iframe on IE, but showing on firefox and chrome。

这是我的 HTML：

<video   autoplay="" controls="" name="media"><source src="https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg"></video>

【参考方案1】：

YouTube 视频不能使用 HTML5 视频标签，它只支持 MP4、WebM 和 Ogg 文件。 W3C Schools

Youtube 已经在他们的页面上为您提供了“嵌入”功能，该功能会自动为您生成 iFrame。 Youtube Embed 还有一些其他方法，但不再使用（已弃用）。 Youtube API

至于 IE 的问题，不妨看看这个类似的问题：YouTube iframe embed code not working in IE

如果您想使用 HTML5 视频标签，解决此问题的唯一方法是下载指定格式之一的 Youtube 视频。

【参考方案2】：

您需要使用 <iframe> 标签来嵌入 YouTube。请阅读以下代码：

<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>