HTML5ビデオ：ビデオコントロールをアクティブなビデオエリアから移動する

Question

アクティブなビデオエリアからストックビデオコントロールバーを移動することはできますか？

私はコントロールがビデオのすぐ下に表示され、再生中に何も覆われないようにしたいと考えています。

ビデオの一番下に表示される重要な情報をカバーしているので、この方法が必要です。

注：独自のコントロールを作成することはできますが、ストックコントロールバーを移動するだけでよいことはわかっています。

ありがとうございます！

Answer 1

代わりに、ユーザーがイベントリスナーを使用してビデオ上にマウスを乗せていないときにコントロールを非表示にすることもできます。

HTML：：

<video id="video1" 
poster="https://placehold.it/350x150" autoplay width="300" height="150"> 
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" /> 
</video> 

JS：このような

//grabs video element by id 
var video1 = document.getElementById('video1'); 

//functions called on events mouseover and mouseout 
function videoPausePlayHandler(e) { 
    if (e.type == 'mouseover') { 
     //adds the controls 
     video1.setAttribute("controls","controls"); 
    } else if (e.type == 'mouseout') { 
     //removes the controls 
     video1.removeAttribute("controls"); 
    } 
} 

//adding event listeners to video element 
video1.addEventListener('mouseout', videoPausePlayHandler, false); 
video1.addEventListener('mouseover', videoPausePlayHandler, false); 

ここでは実施例である：https://jsfiddle.net/l33tstealth/n7qq6s8f/6/