将Youtubevideo源显示为HTML5video标签？

我正在尝试将YouTubevideo源添加到HTML5 <video>标记中，但似乎不起作用。 谷歌search后，我发现，HTML5不支持YouTubevideoURL作为一个来源。

您可以使用HTML5来embeddedYouTubevideo吗？ 如果没有，是否有任何解决方法？

第1步：将&html5=True添加到您最喜欢的YouTubeurl

第2步：在源代码中find<video/>标签

第3步：将controls="controls"添加到video标签： <video controls="controls"..../>

例： 

 <video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

注意，似乎有一些expire东西。 我不知道多久srcstring将工作。

还在testing自己。

编辑（2011年7月28日） ： 请注意，此videosrc特定于您用来检索页面源的浏览器。 我认为Youtubedynamic生成这个HTML（至less目前），所以在testing中，如果我复制到Firefox，这在Firefox中，但不是铬，例如。

这个答案不起作用，但我正在寻找一个解决scheme。

作为。 2015/02/24。 有一个网站（youtubeinmp4） ，允许你以.mp4 format下载youtubevideo，你可以利用这个（用一些JavaScript）来将youtubevideoembedded到<video>标签中。 这是一个演示这个在行动。

优点

  • 相当容易实施 。
  • 相当快的服务器响应实际上（这并不需要太多的检索video）。
  • 抽象 （被接受的解决scheme，即使它工作正常，只有当您事先知道您将播放哪些video时才适用，这适用于任何用户input的url）。

缺点

  • 这显然取决于youtubeinmp4.com服务器及其提供下载链接（可以作为<video>源）传递的方式，所以这个答案可能在将来不是有效的。

  • 您无法selectvideo质量。

JavaScript（ load后） 

 videos = document.querySelectorAll("video"); for (var i = 0, l = videos.length; i < l; i++) { var video = videos[i]; var src = video.src || (function () { var sources = video.querySelectorAll("source"); for (var j = 0, sl = sources.length; j < sl; j++) { var source = sources[j]; var type = source.type; var isMp4 = type.indexOf("mp4") != -1; if (isMp4) return source.src; } return null; })(); if (src) { var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i); if (isYoutube) { var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi); id = (id.length > 1) ? id.splice(1) : id; id = id.toString(); var mp4url = "http://www.youtubeinmp4.com/redirect.php?video="; video.src = mp4url + id; } } }

用法（完整） 

 <video controls="true"> <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" /> </video>

标准video格式。

用法（迷你） 

 <video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

使用youtube.be缩短的URL和src属性直接在<video>标记中，但不太常见但很小。

希望它有帮助！ 🙂

<video>标记是为了加载支持格式的video（可能因浏览器而异）。

YouTubeembedded式链接不仅仅是video，它们通常是包含逻辑的网页，用于检测用户支持的内容，以及如何使用HTML5或Flash或其他基于用户PC上可用内容的插件来播放YouTubevideo。 这就是为什么在YouTubevideo中使用video标签时遇到困难的原因。

YouTube确实提供了一个开发者API来将YouTubevideoembedded到您的网页中。

我做了一个JSFiddle作为一个实例： http : //jsfiddle.net/zub16fgt/

您可以在这里阅读更多关于YouTube API的信息： https ： //developers.google.com/youtube/iframe_api_reference#Getting_Started

该守则也可以在下面find

在你的HTML中： 

 <div id="player"></div>

在你的Javascript中： 

 var onPlayerReady = function(event) { event.target.playVideo(); }; // The first argument of YT.Player is an HTML element ID. // YouTube API will replace my <div id="player"> tag // with an iframe containing the youtube video. var player = new YT.Player('player', { height: 320, width: 400, videoId : '6Dc1C77nra4', events : { 'onReady' : onPlayerReady } });

通过在您的网站中embedded新的iframe代码，代码将自动检测您是否使用支持HTML5的浏览器。

embeddedYouTubevideo的iframe代码如下，只需复制videoID并replace下面的代码： 

 <iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>

没有Javascript没有办法做到这一点。 但是，美妙的MediaElement.js库将为此目的而出色地工作：

http://mediaelementjs.com/examples/?name=youtube

上面的示例显示了使用带有<video>标记的YouTubevideo，但是对于不支持该<video>的浏览器，还有一个回退到Flash的方式。

试试这个，它会工作 

 <object width="640" height="390"> <param name="movie" value="https://www.youtube.com/v/atI4JKFQYoU"></param> <param name="allowScriptAccess" value="always"></param> <embed src="https://www.youtube.com/v/atI4JKFQYoU" type="application/x-shockwave-flash" allowscriptaccess="always" width="422" height="258"></embed> </object>

怎么样做hooktube做它的方式？ 他们实际上并不使用html5元素的videourl，而是调用该video的Googlevideoredirect器url。 看看这里是如何呈现一些despacito随机video… 

 <video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

该代码是针对以下video页面https://hooktube.com/watch?v=72UO0v5ESUo

另一方面youtubeinmp4已经变成了非常货币化的怪物，现在返回下载一半的video下载请求download.html …烦人…

这个答案中的两个链接是我对这两个资源的个人经验。 如何hooktube很好，新鲜，实际上有助于避免审查和地理限制..检查出来，这是非常酷。 而youtubeinmp4是一个popup怪物，现在被称为ConvertInMp4 … 

 <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="100%" width="100%" scrolling="no" src="//www.youtube.com/embed/VIDEO_ID"> </iframe>
Interesting Posts