Streaming videos from Vimeo within an app

[Appy777]

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]

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]

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]

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]

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?

[Appy777]

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

[sefrojones]

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]

@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).

[sefrojones]

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]

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.

[ChrisMukrow]

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]

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]

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]

It's working here using ChrisMukrow script on Kindle Fire.

vimeo.zip

LC 6.6.2

(1.54 KiB) Downloaded 271 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

[sefrojones]

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.