How to lock controls on <video> in HTML5 till a given event happens?

Question

I want to pause the video being played at a particular instant till a question that pops up has been answered. The user should not be able to go ahead and forward the video till a particular question that has just poppped up has been answered.

So I can pause the video using JS at that particular instant. How can I ensure the video's controls are unlocked or the video plays again only after answering the question that pops up?

Answer 1

look at this demo http://jsfiddle.net/dgLds/58/

var video = document.getElementById("myvideo");


function toggleControls() {
    document.getElementById('myvideo').pause();
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}


<video id="myvideo">
    <source src="http://www.w3schools.com/html5/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

instead of on click you can call the function when ever you want

Here is a opera article on everything you wish to know about html5 video http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Specifically look at How to keep things synchronized section

EDIT: I you want to disable right-click options. Just go ahead and disable right click on that tag/id

Here is a jquery code

 $('video').bind('contextmenu', function() 
    {
        alert('no right click.');
        return false;
    }); 

Answer 2

I ran into the need to be able to disable the context menu myself today because we have our own custom controls. You can do this fairly easily:

video.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    return false;
}); 

He is an example built upon Web Developer's demo: http://jsfiddle.net/dgLds/308/

Answer 3

There is a pause() method available for the video element:

document.getElementById('myVideo').pause();

Similarly, there is play().