Camen Design Forum

Is launching an HTML5 video from a function possible?

append delete Allucinari

Hello! I hope I can ask a video question here.

I need to launch a video in full screen autoplay mode when someone clicks a picture (from which i can call a a url or a js function). It can't be using flash (as it's intended for ipad). That's my dilemma. I've not figured out how to do this with VFE or any other tool for that matter, but it seems like it should be possible. But since, I'm not a programmer, I don't know if I'm searching in vain.

i would love to know, thank you.

(I like your forum format btw and your reasons behind it!)

Reply RSS

Replies

append delete #1. Kroc

1. create a div or wrapper and put the video inside it, make it fill the screen (absolute / fixed position) and then hide it with CSS

2. When the user clicks a picture, run some JavaScript to unhide the wrapper and start the video with .play. You could pass the video's URL through the JavaScript function

What's important to note here is that this would not work with VfE because you would need to change both the HTML5 and the Flash video sources, and have to know which one is in use in order to start it playing. You should use mediaelementjs.com (which is an improved version of VfE) that manages the fallback using the same API, so you can set the video file with .setSrc and play the video with .play and MediaElementJS will do the right thing for you.

append delete #2. Allucinari

Thank you. And thanks for responding. I had actually asked a similar question at mediaelementsjs.com forums area as well as videojs.com - both of which seemed like they might work and both of which led me to you actually... but I got no responses. What you suggest very well might work. It's a bit beyond my coding experience as I'm not really a web developer thus I'm using sitegrinderpro (from medialab.com - nice program for people like me) to handle my code. I understand javascript just enough to break things.

Is this something that would be something you could make work in a for-hire situation? I don't want to impose on you and your forums and your time basically making you work, so if you knew how much it might cost, you possibly could email me? (em ail is 2007 at this domain: www.allucinari.com)

Thank you.

(and just so you understand what I'm doing... I have an ugly mock site showing the back-up plan whereas the real desire is clicking on the picturebox and fullscreen autoplay enables. Perhaps here is a generic page that is always ready to take an argument sent by the clicking of the picture which send the url. The actual handling is always the same - autoplay full screen then close after the movie is done.... here is the mock version:

rkptest.deceptionarts.com

)

append delete #3. Martijn

Kroc pretty much sums up what you will have to do. I would like to make a side-note to make sure you understand that full-screen HTML5 video ≠ full-screen flash video. This might not be important for the iPad, I don’t own any iDevices so I wouldn’t know.

The most full-screen you can get with the video element is filling the browser viewport. Flash offers an API to go into real full-screen, filling the whole screen.

The one browser that offers a full-screen API is WebKit, and it seems Safari on iPad will offer this functionality. If you are looking for an iPad specific solution this might help you along in the right direction: stackoverflow.com/…

“Is this something that would be something you could make work in a for-hire situation?”
Sure, you can do that with any problem, as long as you find someone who is willing and capable of spending some time on it ;)

append delete #4. Kroc

@Allucinari I’m afraid I do not offer any work for hire as I am far too busy with regular work as it is. Also, most users asking for a small bit of help wouldn't be able to afford my fees for relatively trivial work that given any serious intent, they could solve themselves. I make it a policy to not hand people solutions on a platter, but rather point them in the right direction.

My recommendation to you, and any user dabbling with VfE, is to stop and go back and learn HTML5 (camendesign.com/…) CSS and JavaScript more deeply. Solving any problem like that which you describe is never just a single issue, it requires a background knowledge in HTML, CSS and JavaScript workings and you would benefit in everything you do to understand these more generally and to write your code by hand.

append delete #5. Allucinari

Thank you both for responding. I will investigate this further and see if I can learn enough programming to come up with something useful. Martijn that link is helpful.

So much to learn now.

Thanks.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn