如何使用 VideoJS 全屏显示 HTML 视频叠加层?
How to show HTML video overlays with VideoJS in fullscreen?
我有一个测验视频叠加层,当 videojs 播放器处于标准模式时,它可以很好地显示:https://jsfiddle.net/kai_noack/zxtkgme7/20/
但是,当进入全屏时它消失了(可能在视频后面)。
我找到了一个过时的解决方案,它将 z-index of the overlay 指定为最大值。它不适用于最新的 Chrome 和 Firefox。
我找到了另一种全屏解决方案 ,而不是视频播放器本身,但它不适用于 videojs 播放器设置。
然后我找到了一个很有前途的解决方案,如何让覆盖元素出现在全屏上 setting position:absolute; and tried to implement it without success: https://jsfiddle.net/kai_noack/zxtkgme7/26/
HTML 我上次尝试(参见 fiddle):
<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 */
#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 the fullscreen overlays seem to work even on fullscreen. But I cannot figure out how it is doing it. – Demo: http://www.xfaktor.com/overlay/overlay_kroger.html 处的 videojs 插件 – 我的叠加层更复杂 HTML,无法使用此插件。
这个 video/videojs 问题的解决方案是什么?
如果你能提供帮助可能是最好的,有这个fiddle(我最近的实现)的起点:https://jsfiddle.net/kai_noack/zxtkgme7/20/谢谢!
问题似乎是,这个库将视频包装在一个额外的 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
我有一个测验视频叠加层,当 videojs 播放器处于标准模式时,它可以很好地显示:https://jsfiddle.net/kai_noack/zxtkgme7/20/
但是,当进入全屏时它消失了(可能在视频后面)。
我找到了一个过时的解决方案,它将 z-index of the overlay 指定为最大值。它不适用于最新的 Chrome 和 Firefox。
我找到了另一种全屏解决方案
然后我找到了一个很有前途的解决方案,如何让覆盖元素出现在全屏上 setting position:absolute; and tried to implement it without success: https://jsfiddle.net/kai_noack/zxtkgme7/26/
HTML 我上次尝试(参见 fiddle):
<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 */
#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 the fullscreen overlays seem to work even on fullscreen. But I cannot figure out how it is doing it. – Demo: http://www.xfaktor.com/overlay/overlay_kroger.html 处的 videojs 插件 – 我的叠加层更复杂 HTML,无法使用此插件。
这个 video/videojs 问题的解决方案是什么?
如果你能提供帮助可能是最好的,有这个fiddle(我最近的实现)的起点:https://jsfiddle.net/kai_noack/zxtkgme7/20/谢谢!
问题似乎是,这个库将视频包装在一个额外的 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