如何在UIWebView中自动播放YouTubevideo
我在这里看到了很多关于这个问题的post，但仍然找不到这个问题的完美答案。
所以我有一个tableview，每个单元格里面有一个播放button。 当用户点击播放button，我添加一个UIWebView到这个单元格，并播放一个YouTubevideo。
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]; }
问题：
这段代码实际上并不像我想要的那样播放video，只是启动YouTube播放器，并使用YouTube红色播放button进行播放。 只有当用户点击红色button，video才会开始播放。
所以用户必须点击两个button，直到video开始 – 不是最好的用户体验…
就像我说过的，我看到很多关于这个问题的post，有些没有工作，有些是有用的，但有一些问题让我感到困惑。
我发现的工作解决scheme之一是在@ilias的这篇文章中 ，他展示了如何使这个工作从一个文件加载HTML（而不是像我这样的string），这个问题是这样的：对于我玩的每个video我需要：
加载htm文件 – >在其中embeddedvideoID – >将文件写入光盘 – >现在只能播放video。
奇怪的是，这个解决scheme只有当你从一个文件加载networking视图请求时，如果我尝试从一个string加载请求的文件内容，这是行不通的。
显然，问题是无底的url，当我改变它的资源库的自动播放工作。
[self loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
自动播放YouTubevideo的完整代码（这个代码大部分基于这个post，我只是改变它从一个string，而不是一个文件加载）：
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]]; }
这里的关键是在你的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)
这是完整的解决scheme：
// // 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
- (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]]; }
我对上面的代码做了一些修改。
使用以下代码在UIWebView播放YouTubevideo
这里我们要求“embedded链接”：
- 只需在浏览器中打开您的YouTube链接
- 右键点击video
- select选项“获取embedded代码”
-
你会得到像 –
<iframe width="640" height="390" src="https://www.youtube.com/embed/xtNXZA4XMBY" frameborder="0" allowfullscreen></iframe> -
复制“src”字段中的链接，这是您的embedded链接
现在把这个embedded式链接放在“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];