How to autoplay a YouTube video in a UIWebView

ghz 7months ago ⋅ 64 views

I have seen a lot of posts in here about this issue, but still couldn't find a perfect answer for this problem.

So I have a tableview, and each cell has a play button inside it. When the user tap the play button, I add a UIWebView to this cell, and play a YouTube video.

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

The problem:

This code doesn't actually play the video like I want, it just initiate the YouTube player and show it with the YouTube red play button. Only when user tap the red button, the video will start playing. So user has to tap two buttons until the video starts - not the best user experience...

Like I said I saw many posts about this issue, some not work at all, and some works but with some issues that bugs me.

One of the working solutions I found was in this post by @ilias, he shows how to get this working with loading the HTML from a file (instead of a string like I do), problem with this approche is that for every video I play I need to: load the htm file -> embed the video Id in it -> write the file to disc -> only now I can play the video.

Strange thing is that this solution only work when you load the web view request from a file, if I try to load the request from a string equal to the file content, that doesn't work.

Answers

To achieve the functionality you're looking for, where a YouTube video plays directly upon tapping a play button in a UITableViewCell without requiring a second tap on the YouTube play button, you'll need to use the YouTube iframe API and a bit of JavaScript to programmatically start the video playback. Here's how you can do it:

  1. Create a local HTML file that includes the YouTube iframe API.
  2. Inject the video ID dynamically and load the HTML into the UIWebView.

Step 1: Create a Local HTML File

Create an HTML file (e.g., youtube.html) and include the YouTube iframe API in it. This HTML file will be saved in your app's bundle.

<!DOCTYPE html>
<html>
  <body style="margin:0;">
    <div id="player"></div>
    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '%0.0f',
          width: '%0.0f',
          videoId: '%@',
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }
    </script>
  </body>
</html>

Step 2: Inject Video ID and Load the HTML into UIWebView

Now, you need to read this HTML file as a string, replace the placeholders with the actual dimensions and video ID, and then load it into the UIWebView.

Here's how you can do it in your view controller:

// Assuming you have a property for UIWebView
@property (nonatomic, strong) UIWebView *webView;

- (void)playVideoWithId:(NSString *)videoId {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"youtube" ofType:@"html"];
    NSError *error;
    NSString *htmlTemplate = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:&error];
    
    if (error) {
        NSLog(@"Error loading HTML template: %@", error.localizedDescription);
        return;
    }
    
    NSString *htmlString = [NSString stringWithFormat:htmlTemplate, self.webView.frame.size.width, self.webView.frame.size.height, videoId];
    
    [self.webView loadHTMLString:htmlString baseURL:nil];
}

Step 3: Handling the Play Button Tap

When the user taps the play button in a cell, call the playVideoWithId: method with the appropriate video ID.

- (void)playButtonTappedInCell:(UITableViewCell *)cell {
    NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
    NSString *videoId = [self videoIdForIndexPath:indexPath]; // Implement this method to get the video ID for the cell
    
    // Create and configure the UIWebView if it doesn't exist
    if (!self.webView) {
        self.webView = [[UIWebView alloc] initWithFrame:cell.contentView.bounds];
        self.webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [cell.contentView addSubview:self.webView];
    }
    
    [self playVideoWithId:videoId];
}

Summary

By following these steps, you can ensure that the YouTube video will start playing automatically when the user taps the play button in a table view cell, without requiring a second tap on the YouTube play button. This solution leverages the YouTube iframe API to control the video playback programmatically.

#ios