javascript - Get the Vine .mp4 source - iOS

Question

I have found a few good answers for this but in PHP, is there a method with JavaScript or with iOS?

The links I have found:

1. How to get Vine video url (not sure how this is implemented)
2. Get .mp4 source and poster image from Vine Id (PHP) - it's php so it's not what I am chasing.

As an example, when you open "inspect element" on the video, this code should be present (with different id's naturally):

If you type in the url("https://v.cdn.vine.co/r/videos/..... .mp4) and stop at the .mp4 the video will play as a video in your browser like so:

https://v.cdn.vine.co/r/videos/283A5A8FE01255752559474962432_365d817ea89.4.3.6417578100978898648.mp4

This is what I want; the url("https://...."). I can edit the entire content of the URL to only get the .mp4 and not the content afterwards, which is a .jpg. That I can do. I can't seem to get the url content by using the https://vine.co/v/eUm1bYVvWj6 link as is, without using PHP.

Any help would be much appreciated.

I have both UIWebView and MPMoviePlayer available and can use either a HTML string in my urlRequest or simply play the .mp4 URL with MPMoviePlayer. I just want to know how to get the .mp4.

Answer 1

After trying to solve this using HTML/JS through creating a HTML string and parsing a vine through iframe, I could not achieve the desired result of retrieving the .mp4 link.

I overcame this by:

1. Go to Ray Wenderlich tutorial on parsing HTML, and follow the tutorial to whatever point you need. The most important parts you will need are to install the hpple files to your project (found through Ray Wenderlich tutorial) and reference libxml2.

2. Use this code for parsing to get the MP4:

   -(void)loadVine: (NSString *) vineLink {
       //create the string to store the result
       NSString * url = nil;
       // Create a URL from the String passed in
       NSURL *vineURL = [NSURL URLWithString:vineLink];
   
       NSData *vineHTMLdata = [NSData dataWithContentsOfURL:vineURL];
   
       TFHpple *vineParser = [TFHpple hppleWithHTMLData:vineHTMLdata];
   
       // This is the most important part of your query
       // The vine .mp4 path is in the `<meta>` tag as show below
       NSString *vineXpathQueryString = @"//meta[@property='twitter:player:stream']";
       NSArray *vineNodes = [vineParser searchWithXPathQuery:vineXpathQueryString];
   
       for (TFHppleElement *element in vineNodes) {
           //this sets your `NSString * url` to be the result
           url = [element objectForKey:@"content"];
           //print it out in log to display your .mp4 link
           NSLog(@"What is the vine? %@", url);
           //now pass it to your player
           [self autoPlayVine:url];
       }
   }
   

3. This is my vine player code:

   -(void) autoPlayVine :(NSString *) link{
   
       NSURL * url = [NSURL URLWithString:link];
   
       self.moviePlayer =  [[MPMoviePlayerController alloc] initWithContentURL:url];
   
       [[NSNotificationCenter defaultCenter] addObserver:self
                                        selector:@selector(moviePlayBackDidFinish:)
                                            name:MPMoviePlayerPlaybackDidFinishNotification
                                          object:self.moviePlayer];
   
       self.moviePlayer.controlStyle = MPMovieControlStyleDefault;
       self.moviePlayer.shouldAutoplay = YES;
       // set the frame to be full screen - needed otherwise you may only get the audio as there is no frame size set, but the movieplayer has been added to the view
       self.moviePlayer.view.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
       // below enables either continuous loop or delete for one time play
       self.moviePlayer.repeatMode = YES;
       [self.view addSubview:self.moviePlayer.view];
       [self.moviePlayer setFullscreen:YES animated:YES];
   }
   

4. Call this in your viewDidLoad or viewWillAppear depending on your preference:

   NSString * yourVineLink = @"https://vine.co/v/.......";
   [self loadVine:yourVineLink];
   

It is important to ensure you have added the right files and import statements to your project via following the Ray Wenderlich tutorial. If you have done that, this should all work fine (Unless Vine decides to change its meta tags/placement of .mp4 link).

NOTE: You could use URL in your method names but I like NSString, it's just my style.

Enjoy.