我正在使用JavaScript / jQuery视频播放器。它有一个我找不到原因的错误。
除其他外，播放器还具有一个进入/退出全屏按钮（可以在HTML代码段的底部看到）：
(function($) {
/* Helper functions */
/* 1) full screen */
function toggleFullScreen(elem) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
$('video').each(function() {
var video = $(this)[0],
videoContainer = video.closest('div'),
$playToggleBtn = $(videoContainer).find('input[name="play-pause"]'),
$progressBar = $(videoContainer).find('.progress-bar'),
$progress = $(videoContainer).find('.progress'),
$current_time = $(videoContainer).find('.current-time'),
$durationDisplay = $(videoContainer).find('.duration'),
$volumeSlider = $(videoContainer).find('.volume-slider'),
$mute_toggle = $(videoContainer).find('.mute-toggle'),
$muteBtn = $mute_toggle.find('input[type="checkbox"]'),
$rate_display = $(videoContainer).find('.rate_display'),
$fullScreenToggler = $(videoContainer).find('input[name="screen-toggler"]'),
$playSpeed = $(videoContainer).find('.playback-rate ul li');
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
if (event === 'FullscreenOff') {
$(videoContainer).removeClass('fullscreen');
$fullScreenToggler.removeClass('exit');
} else {
$(videoContainer).addClass('fullscreen');
$fullScreenToggler.addClass('exit');
}
});
});
})(jQuery);
<div class="video-container">
<video poster="posters/poster.jpg">
<source src="videos/mymovie.mp4" type="video/mp4" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play" /></li>
<li><a href="#" class="previous">Previous</a></li>
<li><a href="#" class="next">Next</a></li>
<li class="mute-toggle unmuted"><input type="checkbox" name="mute" /></li>
<li><input type="range" min="0" max="1" step="0.01" class="volume-slider" /></li>
<li><span class="current-time"></span><span>/</span><span class="duration"></span></li>
<li class="playback-rate">
<span class="rate_display">Normal</span>
<div class="piker">
<ul class="dropdown-content" id="rate_selector">
<li data-rate="0.5">0.5x</li>
<li data-rate="0.75">0.75x</li>
<li data-rate="1">Normal</li>
<li data-rate="1.125">1.125x</li>
<li data-rate="1.5">1.5x</li>
<li data-rate="2">2x</li>
</ul>
</div>
</li>
<li class="fullscreen-container">
<input type="button" name="screen-toggler" value="Fullscreen" class="toggle-fullscreen" />
</li>
</ul>
</div>
</div>
问题：如果我有两个（或更多）视频，即使单击第一个剪辑的全屏按钮，也将fullscreen类名添加到 all 页面上的video-container元素。
为什么会这样？
更新：
按照Kaiido的回答，我已使用以下代码解决了此问题。
$(document).on('fullscreenchange', evt => {
if ($(document.fullscreenElement).is(videoContainer)) {
$(document.fullscreenElement).addClass('fullscreen');
$(videoContainer).removeClass('fullscreen');
$fullScreenToggler.removeClass('exit');
} else {
$(videoContainer).removeClass('fullscreen');
$fullScreenToggler.addClass('exit');
}
});
上述问题已解决。但是，我失去了使用 ESC 键作为全屏退出功能。
更新2：
我已将播放器推入 Github repo 。
答案 0 :(得分：2)
您将事件绑定到Document对象的次数与页面中具有
Stacksnippets不允许全屏显示，但是您正在做的事情的一个模型是：
Property Address `Aa reference`
<chr> <chr> <lgl>
1 PIC: 3WABG086 260 SPRINGHURST ROAD NA
2 PIC: 35PSR217 1350 RIVER ROAD NA
3 PIC# NH244157 1038 QUONDONG ROAD NA
4 PIC: 3GMUF425 70 DIGBY ROAD NA
5 PIC# 3GMUF425 70 DIGBY ROAD NA
6 PIC QTIWW0626 REMOLEA NA
7 PIC#EBWSE235 BOX 191 NA
8 PIC #3WLKM019 198 MONTGOMERY ROAD NA
9 PIC # 3BWMM021 149 ANDERSONS ROAD NA
10 PIC: 3WCGN034 WERRIBEE NA
11 GARANGULA PIC: NH630488 PO BOX 84 NA
12 GARANGULA PIC: NH630488 PO BOX 84 NA
13 PIC: 3GMTL320 2980 GLENELG HIGHWAY NA
14 GREENSLOPES PIC: MJKE0261 914 WEST KENTISH ROAD NA
15 PIC: WFZB3246 859 PFEIFFER ROAD NA
16 PIC: WFAY3549 34605 ALBANY HIGHWAY NA
17 PIC: 3CEXK044 2244 LAVERS HILL ROAD NA
18 PIC: QGWW0462 ELDERFIELD NA
19 PIC: 3WCGN034 WERRIBEE NA
20 KAYA DORPER & WHITE DORPER STUD PIC: WABN0262 NA
21 SPOTTSWOOD PIC QKDR0078 NA
22 COOMBOONA HOLSTEINS PIC 3SPSR217 NA
23 ROSEVALE PIC: QKEV0169 NA
24 NA PIC 3EGON009 NA
25 NA PIC WFKPO316 NA
26 IVADENE PIC 3WANP0T1 NA
27 NA PIC ND225813 NA
28 HEAVENLY VALLEY FARMS PIC #NF538645 NA
29 C/- CED WISE AB CENTRE PIC: QCST0158 NA
30 GARANGULA PIC # NH630488 NA
aa reference
因此，每次您进入或退出全屏模式时，所有这些事件都会触发，并且将在每个视频上进行校准，无论该事件是来自哪个视频。
最好在$('div').each(function(i, el) {
$(document).on('click', e => console.log('clicked'));
console.log('added click event on Document');
})迭代器的外部添加单个事件处理程序
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>但是实际上，使用全屏类的所有操作都是无用的，因为已经有:fullscreen pseudo class由浏览器本地设置。
答案 1 :(得分：0)
据我所知，问题是在“固定”版本中，您将“ fullscreenchange”的单个侦听器附加到文档。然后，在该事件的处理程序中，您将使用在videos-elements-loop中定义的元素：
$(videoContainer).removeClass('fullscreen');
$fullScreenToggler.removeClass('exit'); /
videoContainer和fullScreenToggler均无法按预期工作。