web-dev-qa-db-fra.com

Comment lire automatiquement une vidéo YouTube dans une UIWebView

J'ai vu beaucoup de messages ici sur ce problème, mais je n'ai toujours pas trouvé de réponse parfaite à ce problème.

J'ai donc une vue de table, et chaque cellule a un bouton de lecture à l'intérieur. Lorsque l'utilisateur appuie sur le bouton de lecture, j'ajoute un UIWebView à cette cellule et je joue une vidéo 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];
}

Le problème:

Ce code ne lit pas la vidéo comme je le souhaite, il suffit de lancer le lecteur YouTube et de l'afficher avec le bouton de lecture rouge YouTube. Ce n'est que lorsque l'utilisateur touche le bouton rouge que la vidéo commence à jouer.
L'utilisateur doit donc appuyer sur deux boutons jusqu'à ce que la vidéo démarre - pas la meilleure expérience utilisateur ...

Comme je l'ai dit, j'ai vu de nombreux messages sur ce problème, certains ne fonctionnent pas du tout, et certains fonctionnent, mais avec certains problèmes qui me dérangent.

L'une des solutions de travail que j'ai trouvées était dans ce post par @ilias, il montre comment faire fonctionner cela en chargeant le HTML à partir d'un fichier (au lieu d'une chaîne comme je le fais), problème avec cette approche est que pour chaque vidéo que je joue, je dois:
chargez le fichier htm -> intégrez l'ID de la vidéo dedans -> écrivez le fichier sur le disque -> seulement maintenant je peux lire la vidéo.

Chose étrange, cette solution ne fonctionne que lorsque vous chargez la demande de vue Web à partir d'un fichier, si j'essaie de charger la demande à partir d'une chaîne égale au contenu du fichier, cela ne fonctionne pas.

iosobjective-cyoutubeuiwebviewyoutube-api
34
Eyal

Apparemment, le problème était lié à l'URL de base nulle, lorsque je l'ai changé pour resourceURL, la lecture automatique a fonctionné.

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

Le code complet pour les vidéos YouTube en lecture automatique (encore une fois, ce code est principalement basé sur ce message Je viens de le changer pour le charger à partir d'une chaîne au lieu d'un fichier):

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

La clé ici est de définir playsinline=1 dans votre lecteur iFrame et allowsInlineMediaPlayback = true et mediaPlaybackRequiresUserAction = false pour votre UIWebView. Voici mon implémentation dans 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

Voici la solution complète:

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

J'ai fait quelques corrections au code ci-dessus.

4
Vannian

Utilisez le code suivant pour lire une vidéo YouTube dans le UIWebView

Ici, nous avions besoin d'un "lien d'intégration":

  • Ouvrez simplement votre lien YouTube dans le navigateur
  • Clic droit sur la vidéo
  • Sélectionnez l'option "Get embed code"

  • Vous obtiendrez une sortie comme -

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

  • copiez le lien dans le champ "src", c'est votre lien d'intégration

    Il suffit maintenant de mettre ce lien intégré à la place de "YOU_TUBE LINK" dans le code suivant:

    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