如何在 UIWebView 中自动播放 YouTube 视频答案

【问题标题】：How to autoplay a YouTube video in a UIWebView如何在 UIWebView 中自动播放 YouTube 视频
【发布时间】：2013-03-21 00:15:53
【问题描述】：

我在这里看到了很多关于这个问题的帖子，但仍然找不到这个问题的完美答案。

所以我有一个表格视图，每个单元格里面都有一个播放按钮。当用户点击播放按钮时，我将UIWebView 添加到此单元格，并播放 YouTube 视频。

static NSString *youTubeVideoHTML = @"<html>\
    <body style=\"margin:0;\">\
        <iframe class=\"youtube-player\" type=\"text/html\" width=\"%0.0f\" height=\"%0.0f\" src=\"http://www.youtube.com/embed/%@\" frameborder=\"0\">\
        </iframe>\
    </body>\
    </html>";


- (void)playVideoWithId:(NSString *)videoId {
    NSString *html = [NSString stringWithFormat:youTubeVideoHTML, self.frame.size.width, self.frame.size.height, videoId];

    [self loadHTMLString:html baseURL:nil];
}

问题：

此代码实际上并没有像我想要的那样播放视频，它只是启动 YouTube 播放器并使用 YouTube 红色播放按钮显示它。只有当用户点击红色按钮时，视频才会开始播放。
所以用户必须点击两个按钮，直到视频开始 - 这不是最好的用户体验......

就像我说的那样，我看到了很多关于这个问题的帖子，有些根本不起作用，有些有效，但有些问题让我很困扰。

我在@ilias 的this post 中找到了一个可行的解决方案，他展示了如何通过从文件加载HTML（而不是像我这样的字符串）来实现这一点，这个方法的问题在于我播放的每个视频都需要：
加载htm文件->在其中嵌入视频ID->将文件写入光盘->现在我可以播放视频。

奇怪的是，此解决方案仅在您从文件加载 Web 视图请求时才有效，如果我尝试从等于文件内容的字符串加载请求，则不起作用。

【问题讨论】：

在 iFrame 标签中包含自动播放
@Manohar 不起作用
[[NSNotificationCenter defaultCenter] addObserver:self 选择器:@selector(playbackStateDidChange:) name:@"MPAVControllerPlaybackStateChangedNotification" object:nil];让我知道您收到此通知后
@Manohar：用delegate 代替是什么意思？

标签： ios objective-c youtube uiwebview youtube-api

【解决方案1】：

这里的关键是在您的 iFrame 播放器中设置playsinline=1，并为您的UIWebView 设置allowsInlineMediaPlayback = true 和mediaPlaybackRequiresUserAction = false。这是我在 Swift 中的实现：

// Set up your UIWebView
let webView = UIWebView(frame: self.view.frame) // or pass in your own custom frame rect

self.view.addSubview(webView)
self.view.bringSubviewToFront(webView)

// Set properties
webView.allowsInlineMediaPlayback = true
webView.mediaPlaybackRequiresUserAction = false

// get the ID of the video you want to play
let videoID = "zN-GGeNPQEg" // https://www.youtube.com/watch?v=zN-GGeNPQEg

// Set up your HTML.  The key URL parameters here are playsinline=1 and autoplay=1
// Replace the height and width of the player here to match your UIWebView's  frame rect
let embededHTML = "<html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='\(self.view.frame.size.width)' height='\(self.view.frame.size.height)' src='http://www.youtube.com/embed/\(videoID)?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>"

// Load your webView with the HTML we just set up
webView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)

【讨论】：

我完全按照你的代码，但它没有自动播放，自从你写了这个答案后有什么变化吗？
@Kashif 您使用的是什么平台/ios 版本？
我认为自从这个答案以来发生了一些变化。我使用了这段代码，它显示正确，但没有自动播放。
经过一些小的调整后，它现在可以自动播放了。 :-)
@ryantxr，这些小调整是什么。请分享。

【解决方案2】：

使用以下代码在UIWebView 中播放 youtube 视频

这里我们需要“嵌入链接”：

只需在浏览器中打开您的 youtube 链接
右键点击视频
选择“获取嵌入代码”选项

你会得到类似的输出 -

<iframe width="640" height="390" src="https://www.youtube.com/embed/xtNXZA4XMBY" frameborder="0" allowfullscreen></iframe>

复制“src”字段中的链接，这是您的嵌入链接

现在只需将此嵌入链接放在以下代码中“YOU_TUBE LINK”的位置：

NSString *htmlString = [NSString stringWithFormat:@"<html><head><meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, width = 320\"/></head><body style=\"background:#00;margin-top:0px;margin-left:0px\"><div><object width=\"320\" height=\"480\"><param name=\"movie\" value=\"YOUTUBE_LINK\"></param><param name=\"wmode\" value=\"transparent\"></param><embed src=\"YOUTUBE_LINK\"type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"320\" height=\"480\"></embed></object></div></body></html>"];

[self.webView_youTube loadHTMLString:htmlString baseURL:nil];

【讨论】：

【解决方案3】：

- (void)playVideoWithId:(NSString *)videoId {

NSString *youTubeVideoHTML = @"<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = 'http://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'768', height:'1024', videoId:'%@', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>";

NSString *html = [NSString stringWithFormat:youTubeVideoHTML, videoId];

UIWebView *videoView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 300)];
videoView.backgroundColor = [UIColor clearColor];
videoView.opaque = NO;
//videoView.delegate = self;
[self.view addSubview:videoView];

videoView.mediaPlaybackRequiresUserAction = NO;

[videoView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
}

我对上面的代码做了一些更正。

【讨论】：

【解决方案4】：

这里是完整的解决方案：

//
//  S6ViewController.m
//  
//
//  Created by Ökkeş Emin BALÇİÇEK on 11/30/13.
//  Copyright (c) 2013 Ökkeş Emin BALÇİÇEK. All rights reserved.
//

#import "S6ViewController.h"

@interface S6ViewController ()

@end

@implementation S6ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self playVideoWithId:@"sLVGweQU7rQ"];

}




- (void)playVideoWithId:(NSString *)videoId {

     NSString *youTubeVideoHTML = @"<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = 'http://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'768', height:'1024', videoId:'sLVGweQU7rQ', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>";

    NSString *html = [NSString stringWithFormat:youTubeVideoHTML, videoId];

    UIWebView *videoView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 768, 1024)];
    videoView.backgroundColor = [UIColor clearColor];
    videoView.opaque = NO;
    //videoView.delegate = self;
    [self.view addSubview:videoView];

    videoView.mediaPlaybackRequiresUserAction = NO;

    [videoView loadHTMLString:youTubeVideoHTML baseURL:[[NSBundle mainBundle] resourceURL]];
}

@end

【讨论】：

它是“html”参数，不是吗？ : [videoView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];

【解决方案5】：

显然问题出在 nil 基本 url 上，当我将其更改为 resourceURL 时，自动播放起作用了。

[self loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];

自动播放 youtube 视频的完整代码（同样，此代码主要基于 this post 我只是将其更改为从字符串而不是文件加载）：

static NSString *youTubeVideoHTML = @"<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'%0.0f', height:'%0.0f', videoId:'%@', events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>";  

- (void)playVideoWithId:(NSString *)videoId {
    NSString *html = [NSString stringWithFormat:youTubeVideoHTML, self.frame.size.width, self.frame.size.height, videoId];

    [self loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
}

【讨论】：

您好 Eyal：您的解决方案有问题。自动播放不起作用（如果我删除对 playVideo() 的调用，一切正常，但没有自动播放）。看来我的问题与此处发现的问题相似：groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/…。有任何想法吗？我试过模拟器和设备。我只是无限期地得到一个“视频加载”指示器。
想通了！确保UIWebView 上的mediaPlaybackRequiresUserAction 属性设置为NO（默认为YES）！
它可以很好地自动播放，但视频仍然在我的 iPhone 5 上以全屏（垂直）打开 Youtube 视频，使用 iOS6..还有其他想法吗？为了清楚起见，小窗口首先出现，然后在开始播放后全屏显示。
@Eyal 非常感谢在搜索了很多之后我得到了这个链接，它对我有用。也欣赏你的提问风格。 :)
@PavanMore 很高兴我能帮上忙 :)