如何用javascript控制HTML5视频？

Question

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

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.

Answer 2

To hide the controls you just leave out the controls attribut on the on video element.

You can enter fullscreen for example when a user clicks a button but you can not it seem exit fullscreen when the video ends with the "ended" event.

So you can not combine exitfullscreen with "ended" event.

This seems to be made on porpuse so that you can only enter and exit fullscreen when the user does something.

Demo : http://netkoder.dk/test/test0267.html

Answer 3

1)As for fullsreen:

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!