wake-up-neo.com

So wird ein YouTube-Video in einer UIWebView automatisch wiedergegeben

Ich habe hier eine Menge Posts zu diesem Problem gesehen, konnte aber immer noch keine perfekte Antwort auf dieses Problem finden.

Ich habe also eine Tabellenansicht und in jeder Zelle befindet sich eine Wiedergabetaste. Wenn der Benutzer auf die Wiedergabetaste tippt, füge ich dieser Zelle ein UIWebView hinzu und spiele ein YouTube-Video ab.

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

Das Problem:

Dieser Code spielt das Video nicht so ab, wie ich es möchte, sondern startet lediglich den YouTube-Player und zeigt es mit der roten YouTube-Wiedergabetaste an. Erst wenn der Benutzer auf die rote Taste tippt, wird das Video abgespielt.
Der Benutzer muss also zwei Tasten antippen, bis das Video startet - nicht die beste Benutzererfahrung ...

Wie gesagt, ich habe viele Posts zu diesem Thema gesehen, einige funktionieren überhaupt nicht und einige funktionieren, aber einige Probleme stören mich.

Eine der funktionierenden Lösungen, die ich gefunden habe, war in dieser Beitrag von @ilias, er zeigt, wie man dies funktioniert, wenn man HTML aus einer Datei lädt (anstelle eines Strings wie ich), ein Problem mit diesem Ansatz Muss ich für jedes Video, das ich abspiele, Folgendes tun:
lade die htm datei -> binde die video id ein -> schreibe die datei auf disc -> erst jetzt kann ich das video abspielen.

Seltsamerweise funktioniert diese Lösung nur, wenn Sie die Webansichtsanforderung aus einer Datei laden. Wenn ich versuche, die Anforderung aus einer Zeichenfolge zu laden, die dem Dateiinhalt entspricht, funktioniert dies nicht.

34
Eyal

Anscheinend lag das Problem bei der Null-Basis-URL, als ich sie in resourceURL änderte, funktionierte die automatische Wiedergabe.

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

Der vollständige Code für YouTube-Videos mit automatischer Wiedergabe (wiederum basiert dieser Code hauptsächlich auf diesem Beitrag Ich habe ihn soeben geändert, dass er aus einer Zeichenfolge anstelle einer Datei geladen wird):

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

Der Schlüssel hier ist, playsinline=1 in Ihrem iFrame-Player und allowsInlineMediaPlayback = true und mediaPlaybackRequiresUserAction = false für Ihr UIWebView. Hier ist meine Implementierung in 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)
14
JAL

Hier ist die vollständige Lösung:

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

Ich habe den obigen Code korrigiert.

4
Vannian

Verwenden Sie den folgenden Code, um ein YouTube-Video im UIWebView abzuspielen.

Hier brauchten wir "Embed Link":

  • Öffne einfach deinen YouTube-Link im Browser
  • Rechtsklick auf Video
  • Wählen Sie die Option "Code einbinden"
  • Sie werden ausgegeben wie -

    <iframe width="640" height="390" src="https://www.youtube.com/embed/xtNXZA4XMBY" frameborder="0" allowfullscreen></iframe>
    
  • kopieren Sie den Link in das Feld "src". Dies ist Ihr Einbettungslink

    Setzen Sie nun diesen Einbettungslink an die Stelle von "YOU_TUBE LINK" in den folgenden Code:

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