将Youtube视频源显示为HTML5视频标签？

时间：2011-03-01 16:34:21

标签： html5 youtube embedded-video

我正在尝试将YouTube视频源添加到HTML5 <video>标记中，但它似乎无效。经过一些谷歌搜索，我发现HTML5不支持YouTube视频网址作为来源。

您可以使用HTML5嵌入YouTube视频吗？如果没有，是否有任何解决方法？

8 个答案:

答案 0 :(得分：35)

这个答案不再适用，但我正在寻找解决方案。

从开始。 2015/02/24。有一个website (youtubeinmp4)允许您下载.mp4 format中的YouTube视频，您可以利用此功能（使用一些JavaScript）来放置在YouTube中嵌入YouTube视频{1}}标签。以下是demo的实际操作。

赞成

  • 相当易于实施。
  • 实际上快速的服务器响应（它没有那么多来检索视频）。
  • 抽象（已接受的解决方案，即使它正常工作，只有在您事先知道要播放哪些视频时才适用，这适用于任何用户输入的网址。）

缺点

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

  • 您无法选择视频质量。

JavaScript（<video>之后）

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 src="youtu.be/MLeIBFYY6UY" controls="true"></video> 缩短的网址和youtube.be标记中的src属性。

希望它有所帮助！ ：）

答案 1 :(得分：16)

<video>标记用于加载支持格式的视频（可能因浏览器而异）。

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

YouTube确实提供了一个开发人员API，可以将youtube视频嵌入到您的网页中。

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

您可以在此处详细了解YouTube API：https://developers.google.com/youtube/iframe_api_reference#Getting_Started

“守则”也可以在下面找到

在您的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
    }
});

答案 2 :(得分：15)

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

第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&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的东西。我不知道src字符串可以工作多长时间。

仍在测试自己。

编辑（2011年7月28日） ：请注意，此视频src特定于您用于检索页面源的浏览器。我认为Youtube会动态生成这个HTML（至少目前是这样），所以在测试中我是否可以在Firefox中复制，但这适用于Firefox，但不适用于Chrome。

答案 3 :(得分：2)

我为此功能创建了一个很小的（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>标签添加源的流信息。

答案 4 :(得分：1)

最简单的答案是由W3schools提供的。 https://www.w3schools.com/html/html_youtube.asp

  1. 将视频上传到Youtube
  2. 记下视频ID
  3. 现在在您的HTML5中编写此代码。
product_price_time

答案 5 :(得分：-1)

如果有人偶然发现这个问题，嵌入 YouTube 视频的一种巧妙方法是使用 embed 标签，如下所示： <embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">

答案 6 :(得分：-3)

按照hooktube的方式做到这一点怎么样？他们实际上并没有使用html5元素的视频网址，而是调用该视频的Google视频重定向网址。看看这里他们如何呈现一些despacito随机视频... 

<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>

代码适用于以下视频页面https://hooktube.com/watch?v=72UO0v5ESUo

另一方面，

youtube to mp3变成了极度货币化的怪物，现在返回了一半视频下载请求的download.html ...烦人......

这个答案中的2个链接是我个人对这两种资源的体验。 hooktube如何漂亮和新鲜，实际上有助于避免审查和地理限制..检查出来，它很酷。而youtubeinmp4是一个弹出怪物，现在称为ConvertInMp4 ......

答案 7 :(得分：-4)

在您的网站中嵌入新的iframe标记后，代码会自动检测您是否使用支持HTML5的浏览器。

嵌入YouTube视频的iframe代码如下，只需复制视频ID并替换为以下代码：

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