如何鎖定控件 <video> 在HTML5中直到發生給定事件？

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

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

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

同樣，有play() 。