Using Video in IOS Apps.

[FireWorx]

Hi,
I wanted to start a discussion regarding the use of video in IOS apps. Primarily what is the best way of providing short video content to viewers.

On my last app I provided a short instructional video on the Info page and placed the mp4 file for that video in the engine folder and it was approved by the apple reviewers and is in the iStore. Now this may not exactly conform to apple reviewer guidlines in that it is reproduce-able content and should most likely be either downloaded each time to view it OR be placed in a folder with the "do not back up" atribute set. I was little unsure of the guidelines at that time and am still fuzzy, but hey it was approved.

The fact that it is in the 'engine' folder does makes for no lag time viewing and can it be viewed when the user is off internet which is nice. The downside is the video can not be updated, and also I am sure it makes the app bulkier and takes longer to download which might be noticable when downloaded on g3, and god forbid clutters up the iCloud.

I am wondering what would be the best way to provide the user with a half dozen very short videos. Say 1 minute long each. Perhaps turn on file sharing in the standalone settings, place 1 mp4 in the engine folder as "neccesary content" and then after the user downloads the app and clicks on that video then start downloading the other videos off of my on-rev server web site. (file sharing made easy) Create a folder for the videos in the specialfolderpath documents folder and set the "do not back up" atribute to that folder and then load the videos into that folder.

Then from that point on when the app loads compare the videos on file with the videos on the server and if they are out of date (or MIA from an iCloud restore) then refresh/reload them. What do you guys think? Does anyone see a problem with this? No executable code is being downloaded. Same as file sharing without the process of actualy dragging the videos into the documents folder.
Dave

[colourpixels]

I had mixed success using video. My initial strategy was this:
1)host video on a vimeo account, the pro account lets you stream vids
2) Logic for playing a video goes something like
on playVid NameToPlay
--check and see if nameToPlay&".txt" exists. If it does, then the video has successfully played before
-- yes exists play video NameTo PLay &."mp4" locally
--no video doesn't exist locally, play video using streaming to vimeo version
end
on urlProgress pUrl, pMessage,pbytesR,pbytesT

if pMessage contains "downloaded" then
--video downloaded, save a text file of same name so know to use cache version next time around
open file specialFolderPath("cache")&"/"&gVidToLoad&".txt"
else if pMessage contains "loading" then
set the uValue of grp "Progress" to ((pbytesR/pbytesT)*100)
End if

All of which worked, but I would occasionally just get entire app lock-ups where it froze the app when I stopped playing a video using the native player. So I switched to using an embedded html object and just streaming the videos all the time via a html page (no lock-ups). Which isn't as good, as I had nice loading animations and transitions and it worked offline after the first load of a video, but I just could't work out why it locked up.(seemingly randomly after playing a few videos). They were videos about 5-8 mins long, so not too crazy. <shrug>
end urlProgress

Hope you have more luck than me!

Cheers
Dale

[FireWorx]

Thanks for sharing your experience and the path you took. I will be diving into this fairly soon so I wanted to compare notes. I will share what I think I find when I think I found it. =]
Dave

[kbirand]

I had mixed success using video. My initial strategy was this:
1)host video on a vimeo account, the pro account lets you stream vids
2) Logic for playing a video goes something like
on playVid NameToPlay
--check and see if nameToPlay&".txt" exists. If it does, then the video has successfully played before
-- yes exists play video NameTo PLay &."mp4" locally
--no video doesn't exist locally, play video using streaming to vimeo version
end
on urlProgress pUrl, pMessage,pbytesR,pbytesT

if pMessage contains "downloaded" then
--video downloaded, save a text file of same name so know to use cache version next time around
open file specialFolderPath("cache")&"/"&gVidToLoad&".txt"
else if pMessage contains "loading" then
set the uValue of grp "Progress" to ((pbytesR/pbytesT)*100)
End if

All of which worked, but I would occasionally just get entire app lock-ups where it froze the app when I stopped playing a video using the native player. So I switched to using an embedded html object and just streaming the videos all the time via a html page (no lock-ups). Which isn't as good, as I had nice loading animations and transitions and it worked offline after the first load of a video, but I just could't work out why it locked up.(seemingly randomly after playing a few videos). They were videos about 5-8 mins long, so not too crazy. <shrug>
end urlProgress

Hope you have more luck than me!

Cheers
Dale

Dale can you share the actual code with us.

Thanks,
Koray Birand

[Appy777]

I am very much a newbie to Livecode, and all coding! I want to create an app similar to Howcast, contains lots of streamed video (will be hosted on Vimeo), what is the best way to go about this? The posts in this thread are old, perhaps someone has a solution by now? Many kind thanks!

[FireWorx]

Here is a script to play a video file that is has been copied over to the iOS devise via the standalone builder. The video lives on the iOS devise
This involves setting up a browser control within your app, setting the preferences for it, size etc, and then directing live code to play the video within the browser window.

Card Button Script:
on mouseup
PlayInfoVid
end mouse up

Card Script:
on PlayInfoVid
if the environment is "mobile" then
mobileControlCreate "player", "ioscontrol"
// Set the basic properties including visibility, rectangle and video file path
mobileControlSet "ioscontrol", "filename", specialFolderPath("engine") & "/Cool Fire Cal.mp4"
mobileControlSet "ioscontrol", "preserveAspect", true
mobileControlSet "ioscontrol", "showController", true
mobileControlSet "ioscontrol", "visible", true
mobileControlSet "ioscontrol", "rect", "0,0,320,395"
// Start playing the video
mobileControlDo "ioscontrol", "play"
end if
end PlayInfoVid

And below is a script to play an informational video located on up on the web on youtube.

Below is the script of the card button labeled "Play Video"

global sBrowserId -- not sure if this line is needed its an old script my memory fuzzy
on mouseUp
 if environment() = "mobile" then
put "http://www.google.com" into theURL
      put URL theURL into connCheck
      if connCheck is empty then
         answer "Lack of an internet connection detected. This will prevent viewing of both the Instructional video and File Sharing Instructions."
      exit to top
end if
set the rect of group "browser" to left of this card, 322, right of this card, top of group "toolbar"
DisplayInstructionalVideo
end if
end mouseUp

And below is the Card Script of the card containing the button "Play Video" described above:

global sBrowserId


on opencard
   if environment() = "mobile" then
put "http://www.google.com" into theURL
      put URL theURL into connCheck
      if connCheck is empty then
         answer "Lack of an internet connection detected. This will prevent viewing of the Instructional video."
      else
set the rect of group "browser" to left of this card, 322, right of this card, 942
end if
end if
end opencard

on closeCard
if the environment is "mobile" then
iphoneControlDelete sBrowserId ## the web kit interface
put iphoneControls() into tControlsList
end if
end closeCard

on DisplayInstructionalVideo
if the environment is not "mobile" then exit DisplayInstructionalVideo
put "http://youtu.be/iKnBxZq8Dk8" into tMyYouTubeVideo
replace " " with "%20" in tLocalPDF
iphoneControlDelete sBrowserId ## the web kit interface
iphoneControlCreate "browser"
put the result into sBrowserId
iphoneControlSet sBrowserId, "rect" , the rect of group "Browser"
   iphoneControlSet sBrowserId, "visible" , "true"
   iphoneControlSet sBrowserId, "autoFit", "true"
   iphoneControlSet sBrowserId, "url", tMyYouTubeVideo
end DisplayInstructionalVideo

Hope this helps. Its been awhile and I had to purge some unrelated code out of these scripts. This should get you on your way I recon.
Dave

[Appy777]

Fantastic Dave, thank you. Do you know if this will also work on Android? Or if any changes are needed?

[Appy777]

Dave, another question. To get things to work with script do I need to create any other objects on the card aside from a button for the YouTube version?

[FireWorx]

Hi,
Not sure about android but would bet that that the issue has been addressed search the forum. Im a little rusty so others feel free to chime in but I believe you drag an image object out onto the screen and size and locate it where you would like the video to play then select the img and make it into a group. Label the group "browser" then the: mobileControlSet sBrowserId, "rect", the rect of group "Browser" -- will create the browser control where you want it.

What I would do if I was you would be go to the Livecode Lessons page on browser controls and download the example stack at the top of the page then review the lesson and look at the card script code on the example stack. Play with it. You may be able to load your video into the example stack by adding a few lines of code. Copy and paste at will. You won't need to add the search field, back and forward buttons etc but you will need to create a browser control on open card and then delete when you exit the card. Here is the link.

http://lessons.runrev.com/m/4069/l/2283 ... er-control

Hope this helps.
PS. If you are using android you better not use iPhoneControlSet the new command is mobileControlSet... this is an old script.