<video>
标签中,但似乎无法工作。经过一些搜索,我发现HTML5不支持将YouTube视频URL作为源。您能否使用HTML5嵌入YouTube视频?如果不行,有没有解决方法?
<video>
标签中,但似乎无法工作。经过一些搜索,我发现HTML5不支持将YouTube视频URL作为源。截止至. 2015 / 02 / 24 .,有一个网站(youtubeinmp4)允许您以.mp4格式
下载YouTube视频,您可以利用此功能(使用一些JavaScript)以嵌入YouTube视频在<video>
标签中。这里是示例演示。
##优点
##缺点
显然依赖于youtubeinmp4.com
服务器及其提供下载链接的方式(可以作为<video>
源传递),因此此答案可能在未来无效。
您无法选择视频质量。
###JavaScript(加载后)
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>
标准视频格式。
###使用(Mini)
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
较少见但相对较小的一种方法是,在<video>
标签中,直接使用缩短后的网址youtu.be
作为src
属性。
<video>
标签用于加载支持的视频格式(在不同的浏览器中可能有所不同)。在你的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
}
});
onYouTubeIframeAPIReady
函数(并将上面代码的最后一个代码块放入其中)来避免这种情况。 - jakob.j我已经为这个确切的功能创建了一个相对较小(4.89 KB)的JavaScript库。
在我的GitHub上可以找到:https://github.com/thelevicole/youtube-to-html5-loader/
它很简单:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
这里有一个可工作的例子:https://jsfiddle.net/thelevicole/5g6dbpx3/1/
该库所做的是从数据属性中提取视频ID,并向https://www.youtube.com/get_video_info?video_id=
发送请求。它解码响应,其中包括我们可以用来向<video>
标签添加源的流媒体信息。
2021年6月更新
YouTube最近更新了其API,这破坏了此程序包的以前版本。请使用版本4.0.1
及以上!更新的示例:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
步骤1:在您喜爱的YouTube URL 中添加&html5=True
步骤2:在源代码中找到<video/>
标签
步骤3:向视频标签添加controls="controls"
:<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&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
请注意,似乎有一些过期
的东西。我不知道src
字符串能持续多长时间。
仍在进行测试。
编辑(2011年7月28日):请注意,此视频的src
是特定于您用于检索页面源代码的浏览器的。 我认为Youtube目前会动态生成这个HTML,因此在测试中,如果我在Firefox中复制,则在Firefox中可以运行,但在Chrome等其他浏览器中则无法运行。
你觉得像hooktube这样做怎么样?他们实际上并不使用视频URL作为HTML5元素,而是使用谷歌视频重定向URL来调用该视频。看看这里他们如何呈现一些随机的Despacito视频...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
这段代码是为以下视频页面准备的https://hooktube.com/watch?v=72UO0v5ESUo
另一方面,youtube to mp3已经变成了一个极度赚钱的怪物,现在在一半的视频下载请求中返回download.html...非常烦人...
本答案中的两个链接都是我个人对这两个资源的体验。Hooktube很好,新鲜,实际上有助于避免审查和地理限制...试试看,很酷。而Youtubeinmp4现在是一个弹出式广告怪物,现在被称为ConvertInMp4...
embed
标签,像这样:
<embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">
最简单的答案是由W3schools提供的。 https://www.w3schools.com/html/html_youtube.asp
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
通过在您的网站中嵌入新的iframe标签,代码将自动检测您是否正在使用支持HTML5的浏览器。
嵌入YouTube视频的iframe代码如下,只需复制视频ID并替换以下代码:
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
iframe
标签? iframe
已经存在很久了... - Zeariniframe
标签的存在,所以他直接问了 video
标签。否则他不会问 HTML5(泛指)是否支持Youtube视频,而应该将问题限定在 video
标签上。他甚至在最后一句中问到“是否有任何解决方法?”,因此这个回答是完全有效的。 - Daniel Muñoz Parsapoormoghadam