36

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

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

我已将此Show Youtube 视频源检查到 HTML5 视频标签中吗？但这并不能解决我的问题。

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

7 回答 7

57

MediaElement YouTube API 示例

将 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 width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

<script>
    var player = new MediaElementPlayer('#player1');
</script>
于 2013-11-21T06:08:58.343 回答
14

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

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

于 2014-05-11T16:49:08.280 回答
6

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

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

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

于 2013-11-21T15:41:00.693 回答
2

这很容易做到：

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

只是一个例子。

于 2013-11-07T15:37:54.560 回答
2

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

于 2013-11-22T23:24:47.260 回答
2

这将为您提供所需的答案。最简单的方法是使用 youTube 提供的方法。如何将 Youtube 视频嵌入 HTML5 <video> 标签？

于 2013-11-07T15:25:55.097 回答
-2

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

新的 YouTubeToHtml5();
于 2021-01-11T06:46:43.440 回答