HTML5ビデオ：ネイティブのものが再アクティブ化されたときにカスタムコントロールを非表示にする

Question

ユーザーがデフォルトのブラウザコントロールを再び有効にするためのHTML5ビデオ（/オーディオ）イベントはありますか？

現在、私はcontrolsプロパティを有効にしてからjavascriptで削除し、カスタムコントロールを表示します。しかし、ユーザーがビデオのコンテキストメニューを使用し、デフォルトのブラウザコントロールが表示されるように「コントロールを表示」をクリックするとどうなりますか？私はそのことを賞賛し、そのイベントでコントロールを隠すことができるようにしたいと考えています。

ネイティブコントロールを切り替えたときにコントロールを切り替える良い方法はありますか？

（ controls属性を監視を添加し、それが動作するように見えるしていません削除されている彼らが戻ってプロパティを追加して再有効化が、プロパティは削除されません再びコントロールを非表示にする - 。。chrome16に）

---

EDIT：隠された対照とvar v = document.getElementsByTagName('video')[0];

（最初に、コンテキストメニューで設定）：

コンテキストメニューで示されるネイティブコントロールで

：属性は、実際の要素に変化しているので、

v.getAttribute('controls') // '' in Chrome, "true" in FF9 (string) 
v.controls // true 

、DOMAttrModifiedはええ​​、サポートしているブラウザのために働くだろうか？ （FFとオペラ）。これはsetIntervalを意味し、他にはv.controlsをチェックしますか？

Answer 1

私はあなたのユーザーを知らないが、これはたくさん起こるとは思わない。だから、setIntervalはめったに行われないことのためにオーバーヘッドを追加する可能性があります。 mousemoveのような関連するイベントを使ってコントロールをチェックすることもできます。あなたのコントロールはあなたのvideoタグの後にすぐに兄弟である場合

v.addEventListener("mousemove", function(){ 
    customControls.style.display = (v.controls) ? 'none' : 'block'; 
}, false); 

// Or New jQuery 
$(v).on('mousemove', function(){ ...same... }); 

Answer 2

、あなたはCSSでそれを行うことができます：ビデオをサポートするすべてのブラウザで動作するはず

video[controls] + #controls.custom { 
    display: none; 
} 

を。