using the HTML5 video component to play a video from Device Storage (Video Not in App package file)

Hello,

I've read through every topic I can on video and will highlight a couple in particular that i've found related but not exactly what i'm looking for...

https://getsatisfaction.com/apperyio/...

https://getsatisfaction.com/apperyio/...

from my reading...
I know it is quite easy to embed the HTML 5 video component to play a video from any online source - (youtube, my site, etc.) i also have read that appery.io does not support the option of packaging a video in the app itself for fear of the app download size being too large. that's very reasonable.

My Question then:

i'd like my end app user to be able to download video from my site into phone storage for offline viewing in the app.

- my app will have a simple video page with the HTML 5 video component player in place.
- upon opening the app and using it for the first time, the end app user would be able to download the video - (from my site) - and save it in phone storage.
- then, after that, any time they use the app, the video will be played from the phone storage, NOT from the online source. NOTE: the end user must be able to view the video inside the app, not simply linking to the video and opening the video in another app.

i'm sure this is likely quite easy, but i can't seem to find the answer.

thank you very much,
matt
3 people have
this question
+1
This topic is no longer open for comments or replies.
  • Max Katz (Official Rep) June 22, 2013 03:39
    You can play an HTML5 video by pointing to a file on your site.

    As for downloading -- as for downloading it as the same time, I'm not sure. Check the HTML5 video element (I doubt it can do that). You would need to start the download in another way, such as clicking a link/button.

    You would need access to the file system -- you could then check whether this video has been downloaded. Or, you can set a flag (local storage or similar). Check if the HTML5 video element has access to the file system on a mobile device.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • This reply was removed on 2013-06-22.
    see the change log
  • thank you max for your quick reply!

    perhaps i was a bit too narrow in asking about a solution. let me be clear in saying that i know absolutely nothing about coding or the possibilities out there for making this video work. i've been trying to learn as much as i can the last 2 months, and have found answers to most of my problems other than this one.

    when i first began with appery.io - i just assumed it would be really easy to drag and drop the video in the app (like with an image) and then bundle it all together for the app stores for my users to download - very easy. then, after reading that this is not allowed with appery.io because of the files size of videos, i began searching for a solution.

    let me give a bit more detail so you'll know what i'm doing with this. this app is sort of a mobile presentation app. because of the appery.io limitations on this, the end user will need to do an initial "set-up" of the app, by downloading videos to the device - so that they can make mobile presentations using these videos - without being dependent upon the need for always-on internet connection for streaming and without having to stream the video over and over each day with each presentation. it is absolutely essential that i make this work - somehow.

    as for your points -

    "download at same time"
    - this is not needed at all. the user can simply download the video first in the initial app "set-up" by clicking a link/button. no problem.

    "does the HMTL5 video element have access to the files system?"
    - i was hoping you could answer that one. but i did a quick google search and the answer would seem to be no. am i understanding this correctly? for example: http://en.wikipedia.org/wiki/Comparis...
    and
    http://html5video.in/blog/

    if that is the case - then let me be very broad in my question.

    what other options are there for me to make this work? it doesn't matter to me what type of player i use to play the video in the app. i can make the video available in any kind of format - mp4, mov, flv. all i need to do is to have some kind of grid or panel and have some sort of player or code or something to video play there. should i use some other html code or javascript or other type of player? i have no idea of the possibilities.

    also - it doesn't matter to me where i store the videos once they are downloaded. if they are stored in the general local storage of the device - or if i should make some sort of repository in the app itself to store them after downloading. again, no idea of the possibilities.

    to sum it all up - i am wide-open for any solution - but my lack of expertise has thus far prevented me from finding a solution.

    i really appreciate your gracious help to a newbie!
    matt
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • i think the term "file system" from the above post led me down the wrong path in my search. i don't need to access the file system itself, i simply need to access some type of local storage. i've been reading through other options for media playback and storage - for example:

    here - http://developer.android.com/guide/to...
    and
    http://developer.android.com/guide/to...

    and it is clearly possible to access and playback media from local resources. and i already have apps that i use often that have this functionality of downloading audio and video for playback in the app, but i still can't seem to find code for how to do it.

    thank you again for your help,
    matt
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Max Katz (Official Rep) June 22, 2013 23:15
    Appery.io is a platform to create apps (it's a tool). Appery.io doesn't limit you in any way, you are limited by what the browser can do. Your final app runs in the browser or as a hybrid app on the device.

    You can start playing the video and then have a button that would start downloading the video to the user's device. Your video would need to be stored somewhere in the cloud. Once you downloaded the video, you need to check whether you can point the HTML5 element to the downloaded file.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Max,

    Thank you again for your reply. I must say though, I find your reply to be a bit short and also a bit strange. And I must assume that the fault is mine, because I am a newbie, and somehow I am not communicating well. I will try again, and thank you very much for your time as I continue to work on my hybrid app.

    A couple of things:
    Your comment: "Once you downloaded the video, you need to check whether you can point the HTML5 element to the downloaded file"
    - Yes, that has been my question throughout the course of this topic. How do I accomplish that? I have linked below to a few resources that may or may not provide the answer. I ask for your kind help, as the experts, with this issue.

    I also say the reply is strange because of reading through past topics in the appery.io forum where you and other appery staff contradict what you said in your most recent reply - such as this one for example:

    https://getsatisfaction.com/apperyio/...

    Here both you, Max, and another appery.io employee seem to say clearly that there are limitations in appery.io - limitations which have been decided upon by the appery.io team. In the post above, you state:

    "Max Katz (Official Rep) 1 year ago
    Well, you can still download if you link to them. There is just no option to include the actual file in the app. The app will become pretty large if you try to include audio/video files inside."

    Also Ms. Katya states:
    "Katya Yakusheva (Employee) 3 months ago
    Hello,

    It's something we consider to be added in Tiggzi in future.
    For now, you can export your app to Eclipse or xCode and add audio files to project resources manually."

    So this not allowing of audio/video files to be embedded in apps is a self-imposed limitation by appery.io - at this time. And, Ms. Katya confirms in her reponse that it is quite possible to do, but has not yet been implemented in appery.io at this time.

    and again - a few days ago:

    "Katya Yakusheva (Employee) 3 days ago
    Hi,

    Sorry, no updates. The feature is not implemented yet and I don't have the timeframe."

    All that said, it is clearly possible to make this work, and I would really appreciate a little more help in a work-around for appery.io's current stance on not allowing this functionality at this time.

    i have tried a few other app building sites, and there are some that already allow this functionality of uploading audio/video in the media repository of the app, and allow it to be packaged together as part of the app download. but frankly, i don't want to use any of them because APPERY IS JUST FAR BETTER THAN THE OTHERS in terms of customization and control as we build our apps. And in so many other areas - Appery.io is great and a step ahead in so many ways!!

    as i stated, i have been learning as much as i can the last two months since becoming a paying customer, and have solved my other issues myself by searching, reading, and learning, and trying. I am glad to continue to do so if someone could just help a little bit to tell me if I am going in the right direction. i am not like some who just post a question without trying to learn on their own first. I have tried extensively to solve my problem, but cannot find the answer thus far. That's why I am asking here.

    i'll link a few other resources that i have found in my research, and ask you, the experts, for your kind review. Are these the kind of codes and solutions I need to use for me and my hybrid app?

    http://stackoverflow.com/questions/10...

    http://jsfiddle.net/dsbonev/cCCZ2/

    http://stackoverflow.com/questions/88...

    http://developer.appcelerator.com/que...

    Thank you very much for your help once again!!

    Matt
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Max Katz (Official Rep) June 24, 2013 03:00
    It's not possible yet to include a video directly with the app. If that's the limitation you are referring to -- then, it exists today. As you pointed above, you can still include a video (or any file) with the app by exporting the app source and editing the app outside of Appery.io. In general, even a few seconds video could make the app rather large so it's always best to link to the video hosted somewhere in the cloud.


    Your comment: "Once you downloaded the video, you need to check whether you can point the HTML5 element to the downloaded file"
    - Yes, that has been my question throughout the course of this topic. How do I accomplish that? I have linked below to a few resources that may or may not provide the answer. I ask for your kind help, as the experts, with this issue.

    I don't know the answer of the top of my head. It's something you would need to find and then code the solution. Appery.io makes it very easy to build the UI, connect and bind services, and many other things. But you still need code the app logic.

    Hope this make sense...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thanks Max, again for your reply.

    Exactly - finding and coding the solution is where I am stuck. That is why I linked the code examples in my previous post - asking if those examples of code that I already searched for and found would work for me in my situation. (This is where I have a lot still to learn. I know virtually nothing about coding possibilities, but I am trying).

    I'll link those code examples here again, and perhaps if anyone else happens upon this topic, who knows the answer, then you could join in the conversation and assist.

    http://stackoverflow.com/questions/10...

    http://jsfiddle.net/dsbonev/cCCZ2/

    http://stackoverflow.com/questions/88...

    http://developer.appcelerator.com/que...

    Thanks again Max, for your help. And thanks to anyone else who may read this topic and be able to point me in the right direction.

    Still stuck, but hopeful.
    Matt
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi,
    1) while loading app you need to check if video file name saved. If so - check this file exists http://stackoverflow.com/questions/10... . If file exists go to item 3, otherwise - item 2.
    2) download file from internet to your device and save path to that file in local storage https://gist.github.com/nathanpc/2464060
    3) as source for video component use file name from local storage variable.

    or instead local storage variable with file name use method described on link you've posted. Then the algorithm is the following:

    1) page with links to download files (download here https://gist.github.com/nathanpc/2464060)
    2) page with button to choose file, after you choose file it starts playing http://jsfiddle.net/dsbonev/cCCZ2/
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thanks so much for helping to answer my question!!

    i did a quick copy and paste into an html element using this code:
    http://jsfiddle.net/dsbonev/cCCZ2/

    and that worked just fine when testing on my pc. didn't work when testing on my phone just yet - either in the browser or using the appery.io tester. i don't know why right now, but i think i need to read a bit more and research on those links that you referred me to.

    i'm assuming it didn't work because of something about android permissions possibly? or perhaps i need to activate another phonegap plugin of some sort in the backend of my app? just my guesses at this point. so....

    in any case - i'm going to do be away for a few days on a mission, but hopefully i will be able to do some more reading and see how much more I can learn about all this.

    also - the finished product of this video player does not even need the functionality of allowing the user to choose the video file (as in the example above). it is even more simple than that.

    the design for this app, is that a specific video would be played on each page, and therefore that video would already be coded into the app. no option to change the video or select it. just a simple page with only one video to download from the cloud the first time the user uses the app, then to save that video on device storage, then simply for the user to play and pause that one video per page each time they use the app to give a presentation.

    thank you very much, Marina!! I'll be back in a few days
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • still haven't been able to get this to work sadly. i think i'll take a break on this part of the project and come back to it after everything else is finished.

    thanks again for your help.
    to be continued...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated