如何使用 VideoJS 全屏显示 HTML 视频叠加？

Question

我有一个测验视频覆盖，当 videojs 播放器处于标准模式时，它会很好地显示：https ://jsfiddle.net/kai_noack/zxtkgme7/20/

但是，当进入全屏时它会消失（可能在视频后面）。

我找到了一个过时的解决方案，它将叠加层的z-index指定为最大值。它不适用于最新的 Chrome 和 Firefox。

我找到了另一种解决方案来与 parent进行全屏，而不是 videoplayer 本身，但它不适用于 videojs player 设置。

然后我找到了一个很有前途的解决方案，即如何通过设置 position:absolute;使覆盖元素出现在全屏上。并试图实现它但没有成功：https : //jsfiddle.net/kai_noack/zxtkgme7/26/

我上次尝试的HTML（见小提琴）：

<div id="main-container">

<div id="overlays-wrap">

    <div class="overlay-item" data-overlayid="59" data-time="41">
    <p class="vo-question">
        Welche Zahl ist die Summe bei 3 + 50 = 53?
    </p>

    <div class="vtask-choices-wrap">

        <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
        <label class="radio-tile" for="59-a1">
            <span class="radio-tile-label">
            3
            </span>
        </label>
        </div>

        <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a2" data-correct="0">
        <label class="radio-tile" for="59-a2">
            <span class="radio-tile-label">
            50
            </span>
        </label>
        </div>

        <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a3" value="3" data-correct="1"> 
        <label class="radio-tile" for="59-a3">
            <span class="radio-tile-label">
            53
            </span>
        </label>
        </div>


    </div> <!-- vtask-choices-wrap -->

    <a class="buttonb vtask-btn-continue">Continue</a>

    </div> <!-- overlay-item -->

</div>


<div id="videowrapper">
    <video id="videoplay" class="video-js vjs-default-skin" controls preload="metadata" width="854" height="480" poster="" autoplay="true">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 
    </video>
</div>


</div>

Javascript :

$(document).ready(function() {

var options = {
    playbackRates: [1, 1.5, 2],
    muted: true,
};

video = videojs('videoplay', options);

video.ready(function() {
    /*
       this.on('fullscreenchange',function() {
          console.log('fullscreen event');
       });
    */
}); // end video.ready 


// OVERLAY PREPARE
// $('#overlays-wrap, .overlay-item').hide();

// OVERLAY INTERACTION
$('.radio-tile').click( function() {
    // only show if not yet submitted, prevents submit then click again on radio-tile which would show the vtask-btn-continue
    var submitted = $(this).closest('.overlay-item').hasClass('overlay-submitted');
    if(!submitted)
    {
    $(this).parent().parent().next('.vtask-btn-continue').css('visibility', 'visible');
    // make sure we check the radio button 
    $(this).prev('.vtask-choice').prop('checked', true);
    }
});

$('.vtask-btn-continue').click( function() {
    // hide continue button
    $(this).css('visibility', 'hidden');

    var overlay = $(this).closest('.overlay-item'); // $(this).parent()
    overlay.hide();

});

}); // END ready

CSS：

#overlays-wrap {
position: absolute;
width: 100%;
height: 100%;
max-height:460px;
left: 0;
top: 0;
z-index: 2147483647;
}

.overlay-item {
position: absolute;
top: 0;
color: #FFF;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.85);
width: 100%;
height: 100%;
padding: 0;
z-index: 2147483647;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}

.overlay-item .vo-question {
margin: 10px 0 40px 0;
width: 80%;
text-align: center;
line-height: 1.5;
}

.vtask-choices-wrap {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
width: 100%;
max-width: 1000px;
min-height: 10rem;
}

.vtask-choice-item .vtask-choice {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}

.radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid #079ad9;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
background: rgba(0,0,0,0.5);
z-index: 500;
cursor: pointer;
font-size: 18px;
text-align: center;
}

.vtask-btn-continue {
color: #FFFFFF!important;
border-color: #2B78C5;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: none;
color: #FFF;
background: #39F;
margin-top: 40px;
padding: 10px 20px;
font-family: Arial,sans-serif;
font-size: 16px;
}


/* FIX according /sf/answers/937200561/ */
#videoplay {
position: absolute;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 100%;
z-index: 9997;
}
#overlays-wrap {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 9998;
}

#main_container {
float: left;
position: relative;
left:0;
top:0;
}

有趣的是，使用https://github.com/brightcove/videojs-overlay上的 videojs 插件，全屏覆盖似乎甚至在全屏上也能工作。但我无法弄清楚它是如何做到的。– 演示：http : //www.xfaktor.com/overlay/overlay_kroger.html – 我的叠加层有更复杂的 HTML，无法使用此插件。

这个 video/videojs 问题的解决方案是什么？

如果您能提供帮助，最好是这个小提琴的起点（我最近的实现）：https : //jsfiddle.net/kai_noack/zxtkgme7/20/谢谢！

Answer 1

问题似乎是，该库将视频包装在一个额外的 div 中，并使该 div 全屏显示 - 但您的#overlays-wrap元素在该元素之外，我认为 z-index 不应该对此进行任何更改（？ ）。

并直接将覆盖到#videowrapper的源代码不会做的伎俩-玩家库发生#videoplay，造成包装DIV期权和看跌期权上的ID是。（它将视频元素本身的 id 更改为#videoplay_html5_api，因此在这方面没有冲突。）新的 div#videoplay变为全屏，但#overlays-wrap仍然只是 DOM 中的同级，因此在全屏元素之外。

但是如果你在播放器初始化后#overlays-wrap进入#videoplay，它似乎工作：

video = videojs('videoplay', options); // wraps video element into div#videoplay

$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay

https://jsfiddle.net/pw89cjqe/