Acquire the original Vine video source in .mp4 format on iOS

Question

Acquire the original Vine video source in .mp4 format on iOS

I've come across some helpful answers in PHP, but I'm wondering if there's a way to achieve the same results with JavaScript or iOS.

Here are the links I found:

How to get Vine video url (not sure how this is implemented)
Get .mp4 source and poster image from Vine Id (PHP) - although it's in PHP, which isn't what I'm looking for.

For example, when you inspect the element of the video, you should see this code (with different ids):

https://i.sstatic.net/r7JKN.png

If you type in the URL ("..... .mp4) and only stop at the .mp4, the video will play in your browser like so:

This is my goal; extracting the URL ("https://...."). I can trim down the URL to just get the .mp4 without the extra content afterwards like a .jpg. However, I'm struggling to retrieve the URL content using the link directly without relying on PHP.

Any assistance would be greatly appreciated.

I have both UIWebView and MPMoviePlayer at my disposal and can either utilize an HTML string in my urlRequest or simply play the .mp4 URL with MPMoviePlayer. I just need guidance on obtaining the .mp4 file.

javascript ios mp4 vine

Answer 1

Answer №1

My attempt to solve this issue using HTML/JS and creating a HTML string, then parsing a vine through iframe was unsuccessful in retrieving the .mp4 link I desired.

To overcome this challenge, I followed these steps:

Refer to the tutorial on parsing HTML by Ray Wenderlich, and follow it until you reach the necessary point. Make sure to install the hpple files in your project (as mentioned in the tutorial) and reference libxml2.

Utilize the following code for parsing to obtain the MP4 link:

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

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

Include this in your viewDidLoad or viewWillAppear based on your preference:

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

Ensure you have added the correct files and import statements to your project by following the Ray Wenderlich tutorial. If done correctly, everything should function properly (unless Vine alters its meta tags/.mp4 link placement).

NOTE: While you could use URL in method names, I prefer NSString for stylistic reasons.

Enjoy.

Answer 2

My attempt to solve this issue using HTML/JS and creating a HTML string, then parsing a vine through iframe was unsuccessful in retrieving the .mp4 link I desired.

To overcome this challenge, I followed these steps:

Refer to the tutorial on parsing HTML by Ray Wenderlich, and follow it until you reach the necessary point. Make sure to install the hpple files in your project (as mentioned in the tutorial) and reference libxml2.

Utilize the following code for parsing to obtain the MP4 link:

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

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

Include this in your viewDidLoad or viewWillAppear based on your preference:

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

Ensure you have added the correct files and import statements to your project by following the Ray Wenderlich tutorial. If done correctly, everything should function properly (unless Vine alters its meta tags/.mp4 link placement).

NOTE: While you could use URL in method names, I prefer NSString for stylistic reasons.

Enjoy.

Acquire the original Vine video source in .mp4 format on iOS

Answer №1

Similar questions

Can you demonstrate how to incorporate a new line within a for loop?

Improving the form fields and Stimulus JS by eliminating the need to repeat the :data-action attribute for each individual field

Implementing fullCalendar with eventAllow to limit events based on specific DateTime

Tips on retrieving a result from mongoose's findOne() function

What could be preventing the checkbox from visually updating after programmatically unchecking it with jQuery following a click on 'No' within a modal dialog?

What are the methods to determine if vue-router is being utilized within the present Vue instance?

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

Discover the visibility of an element through monitoring DOM manipulation with Selenium

Compiling with Gulp Browserify may have longer processing times after each save or change

Converting Python conditional statements to Javascript control flow

What is the process for isolating characters from a variable?

What is the best way to showcase the outcomes of arithmetic calculations on my calculator?

Retrieving the output from within an AJAX function

Developing applications in AngularJS that utilize a remote REST API for data retrieval

What are some tips for leveraging aframe in order to achieve a captivating 360 video effect?

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

What is the best way to transfer information from a single card within a collection of cards to a dialog window?

Datalist not displaying options in Chrome browser

"Automating the process of toggling the edit mode of a contenteditable element – how is

How can I use JavaScript (specifically Reactjs/NextJs) to add a new contact to my phone from a web