如何始终在 HTML5 视频上保留一个 div？答案

【问题标题】：How to always keep a div over HTML5 video?如何始终在 HTML5 视频上保留一个 div？
【发布时间】：2016-12-24 18:21:44
【问题描述】：

基本上我需要在我的 HTML 5 视频上覆盖 div。

我用谷歌搜索，发现解决方案是将div z-index 值设置为最大值。所以，我做到了，但问题出在 Firefox 上。当视频在 Firefox 中全屏显示时，我的 div 会低于视频而不是超过它。

http://codepen.io/anon/pen/GNaEKL这个链接我做了，你可以在火狐中测试，点击里面那个绿色的框，自己看结果。

var video_con=document.getElementById("video_container");
				
document.getElementById("flscrn").addEventListener("click",function(){
  alert("hi");
  if (video_con.requestFullscreen) {
			video_con.requestFullscreen();
	} else if (video_con.mozRequestFullScreen) {
	   	video_con.mozRequestFullScreen();
	} else if (video_con.webkitRequestFullscreen) {
			video_con.webkitRequestFullscreen();
	}
});

.pofvv{
	position:relative;
	width:100%;
	height:100%;
	background:black;
	z-index:1;
}
.vid{
	position:absolute;
	height:60px;
	width:100%;
	bottom:0px;
  top:50%;
	background: white;
  	z-index:2147483647;
}
.flscrn{
  position:absolute;
  height:30px;
  width:130px;
  background:green;
  color:white;
  text-align:center;
}

<div class="video_container">
  <video class="pofvv" id="pofvv" controls>
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
  <div class="vid">
      <div class="flscrn" id="flscrn"> full screen </div>
  </div>
</div>

【问题讨论】：

你可以做this.. 但我不完全确定你要做什么
你看过this answer吗？'
@adriancarriger 我说过要覆盖 div 不使用浏览器标准控件

标签： jquery html css firefox video

【解决方案1】：

在这个问题上浪费了我的生命之后，我发现在 Firefox 中还没有在全屏视频上覆盖元素的功能（原因：他们的员工不关心那里的公司）。

但我们可以做的是请求包含视频的 div 全屏显示，然后我们可以在该视频上覆盖任何元素。

var video_con = document.getElementById("div_containing_video");

$('.enter_fullscreen_btn').click(function(){
    if (video_con.requestFullscreen) {
        video_con.requestFullscreen();
    } else if (video_con.mozRequestFullScreen) {
        video_con.mozRequestFullScreen();
    } else if (video_con.webkitRequestFullscreen) {
        video_con.webkitRequestFullscreen();
    }
});

 $('.exit_fullscreen_btn').click(function(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
});

【讨论】：

【解决方案2】：

您需要使用 h.264 编码的视频。现在视频不被火狐支持。

【讨论】：