视频标签中的 YouTube 网址

Posted 2023-02-24

【中文标题】视频标签中的 YouTube 网址

【英文标题】：YouTube URL in Video Tag

【发布时间】：2013-11-19 02:28:04

【问题描述】：

我正在使用<video> 标签，并且我想在其中使用来自 YouTube 的任何 URL。

我有这个http://jsfiddle.net/wCrNw/，但它不起作用。

我已经检查了这个Show Youtube video source into html5 video tag?，但这并没有解决我的问题。

    <video controls="controls" 
           class="video-stream" 
           x-webkit-airplay="allow" 
           data-youtube-id="N9oxmRT2YWw"  
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
           ></video>

【问题讨论】：

@Mr.外星人你能帮我吗

@deekay 不要那样做，坚持使用 youtube 提供给你的默认 iframe 标签。顺便说一句，如果你需要帮助，我不会像这样被 ping，以后考虑在房间里聊天，其他评论关于我的任何答案:)

【参考方案1】：

MediaElement YouTube API example

将 YouTube API 包装在 HTML5 媒体 API 包装器中，以便对其进行编程，就好像它是真正的 HTML5 <video>。

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

<video   id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

<script>
    var player = new MediaElementPlayer('#player1');
</script>

【讨论】：

感谢您的赏金，我很感激。你一切顺利吗？

例子没有展示，但这是必须的：var player = new MediaElementPlayer('#player1');

嗨@MrJustin，API 示例链接不存在了。

有谁知道如何在 Angular 中使用它？

【参考方案2】：

视频标签仅支持视频格式（如 mp4 等）。 Youtube 不公开其原始视频文件 - 它只公开视频的唯一 ID。由于该 id 与实际文件不对应，因此无法使用 video 标签。

如果您确实使用 youtube 下载网站或软件之一获得了实际源文件，您将能够使用视频标签。但即便如此，实际来源的网址也会在设定的时间后停止工作。因此，您的视频也只能在此之前播放。

【参考方案3】：

这个问题最直接的答案是：你不能。

Youtube 没有以正确的格式输出他们的视频，因此它们不能嵌入到 <video/> 元素中。

有一些使用 javascript 发布的解决方案，但不要相信那些，它们都需要后备，并且不能跨浏览器工作。

【参考方案4】：

这将为您提供所需的答案。最简单的方法是使用 youTube 提供的方法。 How to Embed Youtube Videos into HTML5 <video> Tag?

【参考方案5】：

这很容易做到：

<iframe  
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

只是一个例子。

【讨论】：

感谢您的帮助，但我需要它在视频标签中，这是我的问题

这个答案没有使用视频标签元素

【参考方案6】：

根据 2010 年 6 月的一篇 YouTube 博客文章，“视频”标签“目前不能满足 YouTube 等网站的所有需求”http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

【参考方案7】：

试试这个解决方案以获得完美的工作

新的 YouTubeToHtml5();