2013-03-30 2 views
33

Я видел много сообщений здесь об этой проблеме, но до сих пор не смог найти идеального ответа на эту проблему.Как автовоспроизвести видео YouTube в UIWebView

Итак, у меня есть табличное представление, и в каждой ячейке есть кнопка воспроизведения внутри него. Когда пользователь нажимает кнопку воспроизведения, я добавляю 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. Только когда пользователь нажимает красную кнопку, видео начнет воспроизведение.
Таким образом, пользователю нужно нажать две кнопки до тех пор, пока не начнется видеозапись - не лучший пользовательский интерфейс ...

Как я уже сказал, я видел много сообщений об этой проблеме, некоторые из них не работают вообще, а некоторые работают, но с некоторыми проблемами это меня задевает.

Один из рабочих решений, который я нашел, был в this post от @ilias, он показывает, как это сделать, загружая HTML из файла (вместо строки, как я) проблема с этим утверждением заключается в том, что для каждого видео Я играю Мне нужно:
загрузить файл htm -> встроить в него видео Id -> записать файл на диск -> только теперь я могу воспроизвести видео.

Странно то, что это решение работает только при загрузке запроса веб-представления из файла, если я попытаюсь загрузить запрос из строки, равной содержимому файла, это не сработает.

+0

+0

включают Auto Play в этой категории Iframe –

+0

@Manohar, что does't работы – Eyal

ответ

47

Очевидно, проблема заключалась в использовании базового url, когда я сменил его на ресурсURL, который работал автозапуск.

[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]]; 
} 
+0

Hi Eyal: У меня проблемы с вашим решением. Автовоспроизведение не работает (если я удалю вызов playVideo(), все будет работать, но без автовоспроизведения). Похоже, моя проблема аналогична той, что была найдена здесь: https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/vPgKhCu4Vng. Есть идеи? Я пробовал симулятор и устройство. Я просто получаю индикатор «видео погрузки» на неопределенный срок. –

+7

Понял! Убедитесь, что свойство 'mediaPlaybackRequiresUserAction' на вашем' UIWebView' установлено на 'NO' (по умолчанию' YES')! –

+1

Это авто-игра красиво, но видео все еще открывает видео Youtube как полный экран (по вертикали) на моем iPhone 5, используя iOS6..а другие идеи? Просто, чтобы быть ясным, сначала появляется маленькое окно, затем появляется полный экран после его начала. – Fluffhead

7

Вот полное решение:

// 
// 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 
+1

это параметр «html», не так ли? : [videoView loadHTMLString: html baseURL: [[NSBundle mainBundle] resourceURL]]; –

+0

изменить на это: – Vannian

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

Я сделал некоторые поправки к выше коде.

2

Используйте следующий код, чтобы играть Видеосервис YouTube в UIWebView

Здесь требуется «вставлять ссылку»:

  • Просто откройте ссылку юность в браузере
  • правой кнопкой мыши на видео
  • Выберите опцию «Получить код для встраивания»
  • Вы получите выход как -

    <iframe width="640" height="390" src="https://www.youtube.com/embed/xtNXZA4XMBY" frameborder="0" allowfullscreen></iframe> 
    
  • Скопировать ссылку в "ЦСИ" поле, это ваша ссылка встраивать

    Теперь просто поставить эту ссылку для встраивания на месте "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]; 
    
8

Ключ здесь - установить playsinline=1 в плеер iFrame и allowsInlineMediaPlayback = true и mediaPlaybackRequiresUserAction = false для вашего UIWebView. Вот моя реализация в 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) 
+0

Я точно следил за вашим кодом, но он не автовоспроизведен, что-то изменилось с тех пор, как вы напишете этот ответ? – Kashif

+0

@ Кашиф, какую версию платформы/ios вы используете? – JAL

+0

iPhone 6/iOS 9.3.2/Xcode 7.3 – Kashif

Смежные вопросы