How to play youtube/vimeo video within the application in iPhone

Question

I am building an application where I want to play video from url like Youtube, Vimeo, Direct url. I am making custom player using AVPlayer to play a video from a direct url of video clip(like www.abc/play.mp4). But later I faced a huge issue to play youtube & vimeo video. And after searching a lot I found these link where it says without using UIWebview I can't play a Youtube link:

Play YouTube videos with MPMoviePlayerController instead of UIWebView

Playing video from youtube link without UIWebView

So I just used this code:

NSString *youTubeVideoHTML = @"<html><head><style>body{margin:0;}</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:\'100%%\', height:'200px', videoId:\'%@\', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>";

NSString *html = [NSString stringWithFormat:youTubeVideoHTML, videoId];
self.embedded_player_view.mediaPlaybackRequiresUserAction = NO;

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

Now when I click on youtube/Vimeo video link from tableview its playing the video with the default player i.e. quicktime player. Its not running the video within the UIWebview frame itself. But I want to show the video in the 1st half of the screen i.e my UIWebview frame. Is that possible?

In my app I can see this:

when clicking on red play button I can see the video in full screen in quicktime player like this:

enter image description here

But I want to show the video within the same webView frame not via quick time player. It should play like this:

enter image description here

Same does in MusicTube and PlayTube.

Or is there any other way to achieve the same? Any help will be appreciated. Thanks in advance.

Have you got any solution for this issue? I am also trying to display videos from youtuble,vimeo and facing the same issue.Thanks in advance. — Akbari Dipali, Mar 18 '14 at 13:19
Nope. Got some solution for youtube but sorry to say not for vimeo. @AkbariDipali — Avijit, Mar 18 '14 at 13:22

Segev · Answer 1 · 2014-01-15T15:01:21.900

14

enter image description here

I've used this class just for that.

The video you see inside the UIViewController is playable in its current size.

That's the only code I've used:

UIView *videoContainerView = [[UIView alloc]initWithFrame:CGRectMake(0, 50, 320, 200)];
    [self.view addSubview:videoContainerView];        
    XCDYouTubeVideoPlayerViewController *videoPlayerViewController = [[XCDYouTubeVideoPlayerViewController alloc] initWithVideoIdentifier:@"_OBlgSz8sSM"];
    [videoPlayerViewController presentInView:videoContainerView];
    [videoPlayerViewController.moviePlayer play];

edited Jan 15 '14 at 15:01

answered Jan 15 '14 at 14:54

Segev

19,035
12
80
152

Let me know one thing. Isn't it a violation of YouTube's policy? – Avijit Jan 16 '14 at 05:34
@Avijit I never bothered to read YouTube policy. I got a few apps using the above in the AppStore right now so if there's a problem apple doesn't seem to mind. – Segev Jan 16 '14 at 05:47
@Avijit I don't know. I only used it for youtube. – Segev Jan 16 '14 at 06:21
actually there is list of songs for youtube and vimeo. I have to play both of them. – Avijit Jan 16 '14 at 06:45
And the seekbar isn't showing there. I can see only play button and a full screen icon in the player. But there is neither the seekbar nor the total time and progress time as you have shown in your picture. – Avijit Jan 16 '14 at 11:37
@Avijit Recheck your code. The images were taken from the iPhone simulator, Not photoshop. – Segev Jan 16 '14 at 11:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45371/discussion-between-avijit-and-sha) – Avijit Jan 16 '14 at 12:06
Its not playing the vimeo ideo at all. Is there anyway to do it? – Avijit Jan 17 '14 at 13:02
@Avijit did u get any solution for the same? My prob is similar, am using XCdYoutbe third party, SOme songs its able to play and some it cannot play(specially from channels like vevo and all). what exactly you have implemnted, and I heard using XCDYOutube thirdpaty is discouraged by the Apple. Please Help – Jasmeet Apr 28 '14 at 10:56
come on here http://chat.stackoverflow.com/rooms/45803/mobileappfactoryios-android for detail discussion @Jeev – Avijit Apr 29 '14 at 04:42
@Segev still , this one works like a charm . simplest way to implement . thanks, you saved my lot of time . – Moxarth Nov 09 '17 at 10:50

score 7 · Answer 2 · edited May 23 '17 at 12:25

For Vimeo player you can check this link https://github.com/lilfaf/YTVimeoExtractor it plays the video in real player and if you want to run the video in uiwebview,here is the code for that https://stackoverflow.com/a/15918011/1865424.

Pass you URL of YouTube Video in “urlStr”.

//In .h file
UIWebView *videoView;
// In .m file

videoView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 385)];

[self embedYouTube :urlStr  frame:CGRectMake(0, 0, 320, 385)];

[self.view addSubview:videoView];

// methos to embed URL in HTML & load it to UIWebView

- (void)embedYouTube:(NSString*)url frame:(CGRect)frame

{

NSString* embedHTML = @”\

<html><head>\

<style type=\”text/css\”>\

body {\

background-color: transparent;\

color: white;\

}\

</style>\

</head><body style=\”margin:0\”>\

<embed id=\”yt\” src=\”%@\” type=\”application/x-shockwave-flash\” \

width=\”%0.0f\” height=\”%0.0f\”></embed>\

</body></html>”;



NSString* html = [NSString stringWithFormat:embedHTML, url, frame.size.width, frame.size.height];

if(videoView == nil) {

videoView = [[UIWebView alloc] initWithFrame:frame];

[self.view addSubview:videoView];

}

[videoView loadHTMLString:html baseURL:nil];

}

Courtsey :- http://nanostuffs.com/Blog/?p=641

Hope This Will Help You Out. If this doesn't help you out please check out these links:-

http://blog.softwareispoetry.com/2010/03/how-to-play-youtube-videos-in-your.html

https://gist.github.com/darkredz/5334409

http://maniacdev.com/2012/02/open-source-library-for-easily-playing-a-youtube-video-in-an-mpmovieplayer

@Avijit you can check this link for vimeo..http://stackoverflow.com/a/14643632/1865424 If still didn't work let me know. — Kundan, Jan 21 '14 at 17:00
When I used your vimeo link it just played using the default player in iPhone not within the webview(as I expected). Not getting any useful way to play the video within the webview :( . — Avijit, Jan 22 '14 at 06:56
@Avijit i have deleted the URL after Sometime..you download it from here..http://www.sendspace.com/file/jyl7lj — Kundan, Jan 23 '14 at 09:14

score 2 · Answer 3 · answered Jan 14 '14 at 07:52

2

If you wanna play youtube, here's a link to youtube player project on github, It's really helpful. and yes it is possible to play it in your uiwebview, just give the webview the url and tell it to load, it shouldn't open in the default player, as far as i believe at least.

answered Jan 14 '14 at 07:52

Nour Helmi

705
1
6
17

Ok checking it. And let you know the state in few minutes. – Avijit Jan 14 '14 at 07:56
Nope it was again opening in default player. Not in webview frame. – Avijit Jan 14 '14 at 08:46

score 2 · Answer 4 · answered Jan 22 '14 at 06:46

2

I don't know about the Vimeo but for youtube videos you can use HCYouTubeParser to fetch mp4 urls for the youtube videos which can be later played on AVPlayer or MpMoviePlayerVC as per requirements.

answered Jan 22 '14 at 06:46

channi

1,028
9
16

score 2 · Answer 5 · answered Jan 22 '14 at 10:41

I used youtube and vimeo in my Project, I share my codings for you it will very hopeful for you

in my view controller.m

//Button action

- (IBAction)importAudioClip:(id)sender
{
flag = 0;
customActionSheet = [[UIActionSheet alloc]initWithTitle:@"Select Audio/Video from:" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"YouTube",@"Vimeo", nil];
[customActionSheet showInView:self.view];

}


#pragma ActionSheet Delegate Methods
-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
  NSLog(@"CLiekc button is %i",buttonIndex);

 if([actionSheet.title isEqualToString:@"Select Audio/Video from:"])
    {
        if (buttonIndex == 0)
        {
            videoStatus=0;

            webView.hidden = NO;

            [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.youtube.com"]]];
            NSLog(@"Taking from Youtube");

        }
        else if (buttonIndex == 1)
        {
            videoStatus=1;
            UIAlertView *alertView=[[UIAlertView alloc]initWithTitle:@"Vimeo" message:@"Please enter Vimeo Username" delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:@"OK", nil];
            alertView.tag=123;
            alertView.alertViewStyle = UIAlertViewStylePlainTextInput;
            [alertView show];

        }
    }
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
if (alertView.tag==123)
    {
    if (buttonIndex==1)
    {
        templateText=[[UITextField alloc]init];
        templateText = [alertView textFieldAtIndex:0];
        templateText.autocapitalizationType=UITextAutocapitalizationTypeWords;
        templateText.delegate=self;
        if ([templateText.text length]!=0)
        {
            NSString *str=[templateText.text capitalizedString];
            NSLog(@"Str== %@",str);
            [self getVimeoDetails:str];

        }
    }
}
}


-(void)getVimeoDetails:(NSString*)userName
{
 NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://vimeo.com/api/v2/%@/videos.json",userName]]];
[request setHTTPMethod:@"GET"];
NSError *err;
NSURLResponse *response;
NSData *responseData = [NSURLConnection sendSynchronousRequest:request returningResponse:&response error:&err];
NSString *resSrt = [[NSString alloc]initWithData:responseData encoding:NSASCIIStringEncoding];
NSLog(@"The value is==%@",resSrt);
vimeoDetailsArray =(NSArray*) [NSJSONSerialization JSONObjectWithData:responseData options:kNilOptions error:&err];
NSLog(@"jsonObject== %i",[vimeoDetailsArray count]);
NSString *theReply = [[NSString alloc] initWithBytes:[responseData bytes] length:[responseData length] encoding: NSASCIIStringEncoding];
NSLog(@"the reply == %@",theReply);
if(response)
{
    if (vimeoDetailsArray==NULL)
    {
        NSLog(@"its Null");
        NSLog(@"null response== %@",response);
        //                     UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"Alert!!!" message:[NSString stringWithFormat:@"%@",theReply] delegate:self
        //                                                        cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        //                     [alert show];
        // [self performSelector:@selector(showAlertMessage:theReply withTitle:@"Alert!!!") withObject:nil afterDelay:5];
        vimeoVideoTable.hidden=YES;
        [self showAlertMessage:[NSString stringWithFormat:@"%@",theReply] withTitle:@"Alert!!!"];
    }
    else
    {
        [self createTableView];
        vimeoVideoTable.hidden=NO;
        [vimeoVideoTable reloadData];
        NSLog(@"got response== %@",response);
    }
}
else
{
    NSLog(@"faield to connect");
}


if ([responseData length] == 0 && err == nil)
{
    NSLog(@"Nothing was downloaded.");
}
else if (err != nil){

    if ([[err description] rangeOfString:@"The Internet connection appears to be offline"].location != NSNotFound)
    {
        NSLog(@"string does not contain ");
        UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"Alert!!!" message:@"Please Check your Internet Connection" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [alert show];
    }
    NSLog(@"Error = %@", err);
}

}

-(void)createTableView
{
if (vimeoVideoTable !=nil)
{
    [vimeoVideoTable removeFromSuperview];
    vimeoVideoTable=nil;
}
vimeoVideoTable=[[UITableView alloc]initWithFrame:CGRectMake(10, 20, 300, self.view.bounds.size.height-100)];
[vimeoVideoTable setDelegate:self];
[vimeoVideoTable setHidden:YES];
[vimeoVideoTable setDataSource:self];
[self.view addSubview:vimeoVideoTable];
//[vimeoVideoTable reloadData];

}

if you dont mine, i add the view controller.h and view controller.m full code for you — Anbu.Karthik, Jan 22 '14 at 11:21
can you please come here http://chat.stackoverflow.com/rooms/26424/ios-android-devs — Avijit, Jan 22 '14 at 11:26
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45793/discussion-between-avijit-and-anbu-karthik) — Avijit, Jan 22 '14 at 11:50

score 1 · Answer 6 · answered Apr 06 '16 at 09:03

I definitely suggest youtube_ios_player_helper, "sponsored by" Google.

import youtube_ios_player_helper

class YTViewController: YTPlayerViewDelegate {

    @IBOutlet weak var player: YTPlayerView!

    // MARK: - Public properties -

    var videoID = "k_okcNVZqqI"

    // MARK: - View life cycle -

    override func viewDidLoad() {
        super.viewDidLoad()
        self.player.delegate = self
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        self.load()
        self.player.fadeOut()
    }

    /**
     Play video with the relative youtube identifier.
     */
    func load() {
        Utils.showHUD(self.view)
        let options = ["playsinline" : 1]
        self.player.loadWithVideoId(self.videoID, playerVars: options)
    }

    /**
     Stop video playing.
     */
    func stop() {
    }

    // MARK: - YOUTUBE video player delegate -

    func playerViewDidBecomeReady(playerView: YTPlayerView) {
        self.player.playVideo()
    }

    func playerView(playerView: YTPlayerView, didChangeToState state: YTPlayerState) {
        switch state {
        case .Playing:
            self.player.fadeIn(duration: 0.5)
            Utils.hideHUD(self.view)
            print("Started playback")
            break;
        case .Paused:
            print("Paused playback")
            break;
        default:
            break;
        }
    }
}

score 0 · Answer 7 · answered Mar 21 '14 at 20:19

Use this

NSMutableString *html = [[NSMutableString alloc] initWithCapacity:1] ;
[html appendString:@"<html><head>"];
[html appendString:@"<style type=\"text/css\">"];
[html appendString:@"body {"];
[html appendString:@"background-color: transparent;"];
[html appendString:@"color: white;"];
[html appendString:@"}"];
[html appendString:@"</style>"];
[html appendString:@"</head><body style=\"margin:0\">"];
[html appendString:@"<iframe src=\"//player.vimeo.com/video/84403700?autoplay=1&amp;loop=1\" width=\"1024\" height=\"768\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"];
[html appendString:@"</body></html>"];


[viewWeb loadHTMLString:html baseURL:urlMovie];

I get message "This video cannot be played with your current setup" — Durgaprasad, Dec 17 '14 at 13:37

score 0 · Answer 8 · answered Jan 17 '18 at 04:36

I used the following method to solve the same problem successfully.

Use youtube-ios-player-helper and add the code:

[_playerView loadWithVideoId:@"DmTzboEqfNk" playerVars:@{
                                                         @"playsinline" : @1
                                                         }];

You can find more vars in Youtube > IFrame API.

score 0 · Answer 9 · answered May 07 '19 at 12:07

I have used WKWebView in storyboard with constraints and added code :

func playVideo() {

if yourLink.lowercased().contains("youtu.be"){
    getVideo(videoCode: yourVideoCode)
    if let range = yourLink.range(of: "be/"){
        let videoId = yourLink[range.upperBound...].trimmingCharacters(in: .whitespaces)
        getVideo(videoCode: videoId)
    }
} else if yourLink.lowercased().contains("youtube.com"){
    if let range = yourLink.range(of: "?v="){
        let videoId = yourLink[range.upperBound...].trimmingCharacters(in: .whitespaces)
        getVideo(videoCode: videoId)
    }
} else if yourLink.lowercased().contains("vimeo.com") {
    let url: NSURL = NSURL(string: yourLink)
    webKitView.contentMode = UIViewContentMode.scaleAspectFit
    webKitView.load(URLRequest(url: url as URL))
}
}

func getVideo(videoCode: String) {
    guard
    let url = URL(string: "https://www.youtube.com/embed/\(videoCode)")
    else { return }
    webKitView.load(URLRequest(url: url))
}

To get videoId from youtube/Vimeo links, please refer to :

Youtube Video Id from URL - Swift3

Regex to get vimeo video id in swift 2

Hope will help! :)

How to play youtube/vimeo video within the application in iPhone

when clicking on red play button I can see the video in full screen in quicktime player like this:

But I want to show the video within the same webView frame not via quick time player. It should play like this:

9 Answers9

Linked