Question

基本上我需要在我的HTML 5视频上叠加div。

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

http://codepen.io/anon/pen/GNaEKL我已创建此链接，您可以在Firefox中测试它并点击其中的绿色框并自行查看结果。

＆＃13;

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();
	}
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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();
    }
});

Answer 2

您需要使用h.264编码的视频。现在视频不是由firefox支持的。

如何始终保持HTML5视频？

2 个答案: