如何在HTML5中锁定<video>上的控件，直到给定的事件发生？

Question

我想在特定时刻暂停正在播放的视频，直到弹出的问题得到回答。用户应该不能继续并转发视频，直到刚才弹出的特定问题得到回答。

因此，我可以在那个特定时刻使用JS暂停视频。如何确保解锁视频控件，或者在回答弹出的问题后才能再次播放视频？

Answer 1

看看这个演示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>

您可以随时调用该函数，而不是单击

这里有一篇关于你想知道的关于html5视频http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/的文章

具体来看How to keep things synchronized部分

编辑:I您要禁用右键单击选项。只需继续并禁用右键单击标记/id即可

下面是一段jquery代码

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

Answer 2

我今天遇到了一个需要自己禁用上下文菜单的问题，因为我们有自己的自定义控件。你可以很容易地做到这一点：

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

他是一个基于Web Developer的演示的例子：http://jsfiddle.net/dgLds/308/

Answer 3

video元素有一个可用的pause()方法：

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

同样，还有play()。