Cómo reproducir automáticamente un video de YouTube en un UIWebView

He visto muchas publicaciones aquí sobre este problema, pero aún no he podido encontrar una respuesta perfecta para este problema.

Entonces tengo una vista de tabla, y cada celda tiene un button de reproducción dentro. Cuando el usuario presiona el button Reproducir, agrego una UIWebView a esta celda y reproduzco un video de 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]; } 

El problema:

Este código en realidad no reproduce el video como quiero, simplemente inicia el reproductor de YouTube y lo muestra con el button rojo de reproducción de YouTube. Solo cuando el usuario presiona el button rojo, el video comenzará a reproducirse.
Por lo tanto, el usuario debe tocar dos botones hasta que se inicie el video, no la mejor experiencia de usuario …

Como dije, vi muchas publicaciones sobre este tema, algunas no funcionan en absoluto y algunas funcionan pero con algunos problemas que me molestan.

Una de las soluciones de trabajo que encontré fue en este post por @ilias, él muestra cómo hacer que esto funcione cargando el HTML de un file (en lugar de una cadena como yo), el problema con este enfoque es que por cada video que toco Necesito:
cargue el file htm -> inserte el ID de video en él -> escriba el file en el disco -> solo ahora puedo reproducir el video.

Lo extraño es que esta solución solo funciona cuando carga la request de vista web desde un file, si bash cargar la request desde una cadena igual al contenido del file, eso no funciona.

Al parecer, el problema era con la URL de base nula, cuando la cambié a resourceURL, funcionó la reproducción automática.

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

El código completo para videos de YouTube de reproducción automática (de nuevo, este código se basó principalmente en esta publicación. Lo acabo de cambiar para que cargue de una cadena en lugar de un file):

 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]]; } 

La key aquí es configurar playsinline=1 en tu reproductor iFrame, y allowsInlineMediaPlayback = true y mediaPlaybackRequiresUserAction = false para tu UIWebView . Aquí está mi implementación en 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) 

Aquí hay una solución completa:

 // // 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]]; } 

Hice algunas correcciones al código anterior.

Use el siguiente código para reproducir un video de YouTube en UIWebView

Aquí solicitamos "incrustar enlace":

  • Simplemente abra su enlace de YouTube en el browser
  • Haga clic derecho en el video.
  • Seleccione la opción "Obtener código embedded"
  • Obtendrás resultados como:

     <iframe width="640" height="390" src="https://www.youtube.com/embed/xtNXZA4XMBY" frameborder="0" allowfullscreen></iframe> 
  • Copie el enlace en el campo "src", este es su enlace de inserción.

    Ahora simplemente coloque este enlace embedded en el lugar de "YOU_TUBE LINK" en el siguiente código:

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