Streaming videos from Vimeo within an app

Getting into LiveCode for iOS? Ask your questions here.

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Appy777
Posts: 42
Joined: Fri Aug 22, 2014 10:14 pm

Streaming videos from Vimeo within an app

Post by Appy777 » Sun Aug 24, 2014 4:58 am

I am new to Livecode, and in fact have no coding experience. I am building my knowledge but still have a long way to go...

I want to create an app, initially for Android, and once I have perfected that, for iOS. Providing this is possible, my app will give users access to 20 - 40 videos, each 1-2 minutes in length, hosted on Vimeo - so streamed from a Vimeo pro account.

There are a couple of old threads on this forum about streaming from Vimeo, but there was no solution reached. One of the obstacles seemed to be that Vimeo was using flash. I have found some info on Vimeo about a Universal embed code (inthe Vimeo developer info - can't post the URL of course), so perhaps this is no longer an issue?

What I hope for is someone to help with some code which will enable me to do this. I would like my app to contain a menu with the video titles and their thumbnails, and when clicked they will arrive on a new card which contains the streamed Video.

Any help would be greatly appreciated!

Prue.

William Jamieson
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 212
Joined: Fri Feb 01, 2013 1:31 am
Location: Palo Alto, CA put williamdjamieso into tEmail / put n@gmail.com after tEmail/ revmail tEmail
Contact:

Re: Streaming videos from Vimeo within an app

Post by William Jamieson » Thu Oct 02, 2014 11:47 pm

I want to know the answer to this question very much as well... This is critical information. Keep this thread posted if anything comes up.

-Will

ChrisMukrow
Posts: 73
Joined: Mon Nov 12, 2012 4:13 pm

Re: Streaming videos from Vimeo within an app

Post by ChrisMukrow » Fri Oct 03, 2014 10:50 am

Just made a quick test stack for iOS and it works for me (load video, looks like it doesn't use flash but HTML5 by default). Check this link for default usage HTML5: http://vimeo.com/blog/post:606 To change the video you can use command goUrl pUrl to change the url/video.

Hope this helps, Chris

Code: Select all

global sBrowserId

on openCard
   send "createBrowser" to me in 0 milliseconds
end openCard

------------------------------------------------------------------------------------
// Browser
------------------------------------------------------------------------------------

on createBrowser
   
   // Embed link from vimeo, used iframe source (//player.vimeo.com/video/24260960) and added http:
   //<iframe src="//player.vimeo.com/video/24260960?title=0&byline=0&portrait=0&color=ff0000" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/24260960">Danny MacAskill Plays Capetown (complete video)</a> from <a href="http://vimeo.com/leicacamera">Leica Camera</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
   
   put "http://player.vimeo.com/video/24260960" into URLValue

   iphoneControlCreate "browser"
   put the result into sBrowserId
   
   iphoneControlSet sBrowserId, "visible", "true"
   iphoneControlSet sBrowserId, "autofit", "true"
   
   iphoneControlSet sBrowserId, "url", URLValue
   
   iphoneControlSet sBrowserId, "rect", the rect of this card
   
end createBrowser

on closeCard
   if the environment is not "mobile" then
      exit closeCard
   end if
   
   iphoneControlDelete sBrowserId
end closeCard

command doAction pAction
   if the environment is not "mobile" then
      exit doAction
   end if
   
   iphoneControlDo sBrowserId, pAction
end doAction

command goUrl pUrl
   if the environment is not "mobile" then
      exit goUrl
   end if
   
   iphoneControlSet sBrowserId, "url", pUrl
end goUrl

on CloseWeb
   iphoneControlDelete sBrowserId
end CloseWeb

William Jamieson
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 212
Joined: Fri Feb 01, 2013 1:31 am
Location: Palo Alto, CA put williamdjamieso into tEmail / put n@gmail.com after tEmail/ revmail tEmail
Contact:

Re: Streaming videos from Vimeo within an app

Post by William Jamieson » Sat Oct 04, 2014 4:14 am

Wow! That is really intriguing. I notice that you mentioned that you added the iFrame. That has been a really big question hanging over my head in all this research. You mentioned in the comment that you added it, would you be willing to explain a little more in detail exactly how you did this?

Thanks for you help and your support!

-Will

dave.kilroy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 858
Joined: Wed Jun 24, 2009 1:17 pm
Location: Plymouth, UK
Contact:

Re: Streaming videos from Vimeo within an app

Post by dave.kilroy » Sat Oct 04, 2014 6:15 pm

William, inserting an iFrame into your html code is actually very easy (just google 'iframe' for lots of tutorials) but at its simplest is along the lines of:

Code: Select all

<iframe src="https://www.youtube.com" style="width: 90%; height: 300px"></iframe>
Is this the kind of thing you need?
"...this is not the code you are looking for..."

Appy777
Posts: 42
Joined: Fri Aug 22, 2014 10:14 pm

Re: Streaming videos from Vimeo within an app

Post by Appy777 » Sun Oct 05, 2014 3:32 am

Thanks Dave! Is anyone able to provide info for Android? Does this code work for Android too?

sefrojones
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 447
Joined: Mon Jan 23, 2012 12:46 pm

Re: Streaming videos from Vimeo within an app

Post by sefrojones » Sun Oct 05, 2014 8:17 am

If I recall correctly, the problem with streaming videos on android is that the video will show up as a black box, unless full screened by the user.

ChrisMukrow
Posts: 73
Joined: Mon Nov 12, 2012 4:13 pm

Re: Streaming videos from Vimeo within an app

Post by ChrisMukrow » Sun Oct 05, 2014 6:48 pm

@Will When you use the iframe/embed code under share (see images) in Vimeo, you can make videos full screen from the get-go. Thats why I used the iframe link instead of the normal url (otherwise you will see the whole page). This code also works for Android, but you need to change iPhone with mobile (not 100% sure but last time I checked it worked).

Image
Image

sefrojones
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 447
Joined: Mon Jan 23, 2012 12:46 pm

Re: Streaming videos from Vimeo within an app

Post by sefrojones » Sun Oct 05, 2014 7:14 pm

I just tested this code on android (replacing iphone with mobile) and the video is black. The player loads up as expected, and when being played, the sound plays but the video remains black. Even hitting the fullscreen button doesn't change this. Anyone have this working on android?

--Sefro

newtronsols
Posts: 192
Joined: Tue Mar 11, 2014 12:57 pm

Re: Streaming videos from Vimeo within an app

Post by newtronsols » Sun Oct 05, 2014 9:00 pm

Yes I have it working on Android - have you set application permissions to Internet? or tried another version of LC.

I tried share and I get 3 + 1 red boxes. if you click the boxes you can share by email.
Last edited by newtronsols on Sun Oct 05, 2014 9:08 pm, edited 1 time in total.

ChrisMukrow
Posts: 73
Joined: Mon Nov 12, 2012 4:13 pm

Re: Streaming videos from Vimeo within an app

Post by ChrisMukrow » Sun Oct 05, 2014 9:06 pm

I just checked it on a device (One X) with application permissions to internet on and acceleratedrendering, but only sound. This is the bug report: http://quality.runrev.com/show_bug.cgi?id=10267 from 2012-06

newtronsols
Posts: 192
Joined: Tue Mar 11, 2014 12:57 pm

Re: Streaming videos from Vimeo within an app

Post by newtronsols » Sun Oct 05, 2014 9:19 pm

I just literally pasted to the card script. Searched and replaced iphone to mobile. Set app permissions to internet and external - and install location external storage. Gave it a name and tested. I didn't modify anything else - I'm using 6.7 rc2 commercial and a sony xperia sp.

oh, except I did put a label on the screen to say modified for android. Just so I knew that the blank thing was an app.

And it worked.

sefrojones
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 447
Joined: Mon Jan 23, 2012 12:46 pm

Re: Streaming videos from Vimeo within an app

Post by sefrojones » Sun Oct 05, 2014 9:53 pm

Newtronsols,

what I am experiencing is that the player loads, the share buttons, and video controls are visible,as well as the image for the video, but when you press play, only the sound plays - the video remains black. As far as I know this is related to the bug that Chris posted....

--Sefro

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Streaming videos from Vimeo within an app

Post by Simon » Sun Oct 05, 2014 10:51 pm

It's working here using ChrisMukrow script on Kindle Fire.
vimeo.zip
LC 6.6.2
(1.54 KiB) Downloaded 164 times
Well when I say it works I do think there is still a bug, you have to double tap the video to get the player controls showing. Then pressing play it works.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

sefrojones
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 447
Joined: Mon Jan 23, 2012 12:46 pm

Re: Streaming videos from Vimeo within an app

Post by sefrojones » Sun Oct 05, 2014 11:00 pm

I just got it working using the workaround from Neil Roger in the bug report.
Until this feature is available, there is a workaround (However, we cannot provided support for this method)

The workaround is to edit Android Manifest from the built APK.

The tools used to achieve this was "APKTool" and this can be acquired from the below link.

https://code.google.com/p/android-apktool/

I then generated a new keystore file to use for signing purposes. The following is the terminal script I used for this.
keytool -genkey -v -keystore youtube.keystore -alias youtube -keyalg RSA -keysize 2048 -validity 10000

Next, I decoded the APK via the following terminal script

java -jar apktool.jar decode MyBrowser.apk app

Next step is to amended the “AndroidManifest.XML” folder contained within the decoded APK folder with -android:hardwareAccelerated="true"

I then re-built the Android APK with the up-to-date AndroidManifest via-
sudo java -jar apktool.jar build -a /Users/Neil/Documents/android-sdk-macosx/build-tools/17.0.0/aapt app app_new.apk

And finally re-signed the APK with the following
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore youtube.keystore app_new.apk youtube

You will need to amend the various paths/APK details for your specific setup
This is working as expected, no double taps, no need to press fullscreen. :D

Post Reply

Return to “iOS Deployment”