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/