How to control HTML5 video with javascript?

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?

2) http://stackoverflow.com/questions/2954595/html5-video-callbacks — Martijn, Oct 21 '10 at 13:58

score 2 · Accepted Answer · answered Oct 21 '10 at 16:30

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.

score 0 · Answer 2 · answered Mar 01 '14 at 21:21

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

score 0 · Answer 3 · edited May 23 '17 at 11:47

0

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!

edited May 23 '17 at 11:47

Community

1
1

answered Oct 21 '10 at 13:58

Trufa

35,711
41
118
180

As for 1 It's true,but not impossible to make it.As for 2,It's fullscreen I cannot change that.As for 3,It's what I found exactly.You partially helped me.Thank you.+1 – Myra Oct 21 '10 at 16:11
@Myra ok great! sorry I couldn´t be of more help! Thanks for sharing you own answer! good luck! – Trufa Oct 21 '10 at 17:34

How to control HTML5 video with javascript?

3 Answers3