YouTube iframe embed not starting in HD

2019-01-16 17:51发布

站内问答 / 后端开发
1587 8 6

I'm trying to embed an HD YouTube video but no matter what I try, it only ever seems to load the 480p version.

According to YouTube, embedding an HD video is as simple as adding hd=1 to the URL:

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

This, however, does not seem to be working, at least in my implementation of the 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>

The same is true with the 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();
    }

8条回答
放荡不羁爱自由
2楼-- · 2019-01-16 18:27

After spending more than 5hrs searching and testing all the answers, the below code works for me. Using Xcode 5, iOS 7.0.4 and 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"]];

}

The only important thing here is the aspect ratio that you set in your iframe (" width=\"640px\" height=\"360px\"), which are basically the ratios of 1280*720. And then set the same size for your UIWebView. Hope this help someone.

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-01-16 18:37

I might be a little late, but I just discovered it only looks at the height of the video player.

When I try to embed a video 1000px wide, but only 408 pixels high (2.35:1 matte) it selects 360p >:|

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-01-16 18:38

I use &hd=1&vq=hd720 for achieve that. It loads the 720p version even if the player is smaller. I got this information from this source.

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-01-16 18:42

As per this answer on the YouTube support forum:

[The iframe embed] will attempt to "optimize" the experience and will work off of the dimensions of the embed player to choose what quality to play it back at by default.

If the embed is much smaller than 1280x750, such as 853x510 or 640x390, it will play 480p or 360p, regardless of whether the &hd=1 parameter is set.

(Emphasis mine)

I changed the dimensions of the iframe to 1280x720 and the video loaded at 720p resolution.

So, basically the iframe embed mechanism is intelligent and only loads the closest resolution according to the size of the iframe.

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
6楼-- · 2019-01-16 18:46

There is a trick you can do. Set the quality via JS. Its not guaranteed, but works on my site (ggreplayz.com):

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

Example:

<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');
    }
...
查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
7楼-- · 2019-01-16 18:47

Mine wasn't working at all. I tried everything including all these parameters

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

But it didn't work until I added this parameter:

&version=3
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)