How to control HTML5 video with javascript ?

Question

Hi,I've searched so much about HTML5 video control and I'm stuck at controlling video with javascript.There is a rule in application you should know.

There will not be any user interaction with browser at any time.

What I'm trying to achieve is
1) Open video as fullscreen and play video
2) When video is ended,close video and video will be gone from screen so html content will be seen
3) Display controls of video will not be seen at all times.

What is the easiest way to achieve such actions with javascript?

Answer 1

2) http://stackoverflow.com/questions/2954595/html5-video-callbacks

Answer 2

1)As for fullsreen:

http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen

2) maybe you could consider going with a jQuery plugin like and lightbox, maybe something like this

EDIT: and check @Mzialla´s answer.

3)As for the video player check this out:

http://videojs.com/

Good luck!

Answer 3

VideoJS is pure CSS based video player and it's open source.It's my only choice if I'm going to solve this problem with HTML5.

For controls of video,VideoJS has some options in the beginning.

$("video").VideoJS({ 
      controlsbelow: false,
      showControlAtStart: false
});

For Full Screen problem,I found my own solution,I wish to share it with you.
Since I know screen size,I made a panel above of all content.

.fullscreen {
    width:1280px;
    height:800px;
    z-index:10001;
    top:0;
    left:0;
    position:fixed;
}

Note that browser is in full screen mode,so don't mix this as normal full screen resolution of video content.

At the end of my video I'm changing visibility to hidden (display:none)

$("video").bind("ended", function () {
      $("#videoContainer").removeClass("fullscreen").addClass("hidden");
});

Then both container window and video content becomes full screen. Thank you all.