YouTube iframe 嵌入未以高清开始答案

【问题标题】：YouTube iframe embed not starting in HDYouTube iframe 嵌入未以高清开始
【发布时间】：2011-12-24 19:35:48
【问题描述】：

我正在尝试嵌入高清 YouTube 视频，但无论我尝试什么，它似乎都只能加载 480p 版本。

根据 YouTube 的说法，嵌入高清视频就像在 URL 中添加 hd=1 一样简单：

<iframe src="//www.youtube.com/embed/{videoId}?hd=1" width="960" height="720"  frameborder="0" allowfullscreen></iframe>

但是，这似乎不起作用，至少在我实现 iframe 时：

<iframe id="video-player" width="960" height="720" src="//www.youtube.com/embed/{videoId}?enablejsapi=1&autoplay=1&rel=0&modestbranding=1&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe>

Javascript API 也是如此：

HTML：

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

JS：

    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('video-player', {
            height: '720',
            width: '960',
            videoId: '{videoId}',
            playerVars: {
                'controls': 1,
                'autoplay': 1,
                'hd': 1
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        player.playVideo();
    }

【问题讨论】：

标签： iframe youtube embed youtube-api

【解决方案1】：

使用此参数：

vq=hd1080

示例：

<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>

【讨论】：

对于那些想知道的人来说，尽管该参数没有出现在 Google 的支持列表或弃用列表中，但一年多后它仍然有效。
很遗憾，YouTube 在 2013 年 10 月放弃了对 1080p 视频的支持。您现在只能获得 720p：googlesystem.blogspot.de/2013/10/…
无法以 1080p 自动播放。嵌入尺寸为 940x529

【解决方案2】：

根据 YouTube 支持论坛上的 this answer：

[iframe 嵌入] 将尝试“优化”体验，并且会成功嵌入播放器的尺寸以选择播放的质量它默认返回。

如果嵌入比 1280x750小很多，例如 853x510 或 640x390，它将播放 480p 或 360p，无论是否设置了 &hd=1 参数。

^{（强调我的）}

我将 iframe 的尺寸更改为 1280x720，并以 720p 分辨率加载视频。

所以，基本上 iframe 嵌入机制是智能的，只会根据 iframe 的大小加载最接近的分辨率。

【讨论】：

将vq=hd720 添加到 URL 中可以解决问题，即使您的 iframe 尺寸较小。 720p 流的缩小版本看起来通常比原生 360p 或 480p 版本更好，而且音频也更好。
@RubenVerborgh，这还能用吗？我现在尝试时似乎并不强制。您使用的是 /embed 还是 /v？
@MarcoMarsala：你有没有在 iPad 上找到解决方案？
使用 &vq=1080 以及以像素为单位的 iframe 大小，通过 CSS 或宽度/高度设置应为 1080...否则 iPad 不会加载高清版本（但计算机会加载）。请参阅我正在开发的网站上的示例：metro-5.com 视频将在计算机上以全高清质量播放（因为我使用 vq=1080）但在原生 Apple 视频播放器中质量很差（因为帧高度只有 320 和 Apple按设计忽略 vq 参数），但您可以在运行时从 UI 进行更改。如果我将 iframe 设置在更高的高度，它们会从一开始就以更好的质量播放。

【解决方案3】：

你可以做一个技巧。通过 JS 设置质量。不能保证，但可以在我的网站 (ggreplayz.com) 上使用：

https://developers.google.com/youtube/js_api_reference#Playback_quality

例子：

<iframe id="vid2" style="z-index: 1;" width="853" height="505" src="http://www.youtube.com/embed/<?php echo $vid2Array[0];?>?enablejsapi=1&wmode=transparent&hd=1" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
...
    function onYouTubePlayerAPIReady() {    
      player1 = new YT.Player('vid1', {
        events: {
          'onReady': onPlayerReady1
        }
      });
...
    function onPlayerReady1(event) { 
        player1.setPlaybackQuality('hd720');
    }
...

【讨论】：

哇！是工作。我关注了developers.google.com/youtube/iframe_api_reference。
这是一个很好的答案。这是使用 YouTubeAPI 时将视频质量设置为 hd720 的唯一方法

【解决方案4】：

hd 参数已被弃用：https://developers.google.com/youtube/player_parameters#Deprecated_Parameters

【讨论】：

【解决方案5】：

我使用&hd=1&vq=hd720 来实现这一点。即使播放器较小，它也会加载 720p 版本。我从this source 获得了这些信息。

【讨论】：

【解决方案6】：

我可能有点晚了，但我发现它只看视频播放器的高度。

当我尝试嵌入 1000 像素宽但只有 408 像素高（2.35:1 遮罩）的视频时，它会选择 360p >:|

【讨论】：

这是有道理的，因为视频的分辨率是以高度来衡量的。 1280x720 是 720p，1920x1080 是 1080p。奇怪的是，下一代高清是 4k，但这个数字是从它的水平分辨率得出的。

【解决方案7】：

在花费超过 5 小时搜索和测试所有答案后，以下代码对我有用。使用 Xcode 5、iOS 7.0.4 和 iPad mini2。

- (void)viewWillAppear:(BOOL)animated
{


NSString *htmlString = @"<html><head>\
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, height = 640px, width = 360px\"/></head>\
<body style=\"background:#000;margin-top:0px;margin-left:0px\">\
<iframe id=\"ytplayer\" type=\"text/html\" width=\"640px\" height=\"360px\"\
src=\"http://www.youtube.com/embed/%@?vq=hd1080\"\
frameborder=\"0\"/>\
</body></html>";

htmlString = [NSString stringWithFormat:htmlString,self.videoId, self.videoId];
[self.videoPlayerView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.youtube.com"]];

}

这里唯一重要的是您在 iframe 中设置的纵横比 (" width=\"640px\" height=\"360px\")，基本上是 1280 的比率*720. 然后为你的 UIWebView 设置相同的大小。希望这对某人有所帮助。

【讨论】：

【解决方案8】：

我的根本不工作。我尝试了一切，包括所有这些参数

&hd=1&vq=hd720&quality=high

但是直到我添加了这个参数它才起作用：

&version=3

【讨论】：