如何锁定HTML5中<video>的控件直到给定的事件发生？</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/

的所有内容的歌剧文章

具体看如何保持同步部分

编辑：我想禁用右键单击选项。只需继续并禁用右键单击该标记/ 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

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

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

同样，还有play()。