我正在使用 HTML5 video 元素开发自定义视频播放器，但我无法让全屏按钮与 Fullscreen API 一起使用.
当我点击它时，我收到错误消息:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
但是，我正在使用用户手势启动对 requestFullscreen 的调用...除非我误解了什么构成了用户手势。单击元素是一种用户手势，不是吗？
我意识到在 SO 上有很多关于全屏 API 的问题，但看起来很多人想要在没有用户交互的情况下启动全屏模式。
我做错了什么？
有一个pen使用此代码，但当我找到解决方案时，我可能会更改它。我不会更改此处的代码。
代码如下:
/* Get our elements. */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');
const fullscreen = player.querySelector('.fullscreen');
let isFullScreen = false;
/* Build our functions */
function togglePlay() {
const action = video.paused ? 'play' : 'pause';
video[action]();
}
function updatePlayIcon() {
toggle.classList.toggle('playing');
}
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
function handleRangeUpdate() {
video[this.name] = this.value;
}
function handleProgress() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = percent + '%';
}
function scrub(e) {
const seconds = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = seconds;
}
function toggleFullScreen() {
if (isFullScreen) {
console.log("exiting fullscreen");
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
console.log('removing fullscreen class');
player.classList.remove('fullscreen');
} else {
console.log("entering fullscreen");
if (player.requestFullscreen) {
console.log('requestFullScreen');
player.requestFullscreen(); // standard
} else if (player.webkitRequestFullscreen) {
console.log('webkitRequestFullscreen');
player.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (player.mozRequestFullScreen) {
console.log('mozRequestFullScreen');
player.mozRequestFullScreen();
} else if (player.msRequestFullscreen) {
console.log('msRequestFullscreen');
player.msRequestFullscreen();
} else {
console.error('Unable to find a fullscreen request method');
}
console.log('adding fullscreen class');
player.classList.add('fullscreen');
}
isFullScreen = !isFullScreen;
}
/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
toggle.addEventListener('click', togglePlay);
video.addEventListener('play', updatePlayIcon);
video.addEventListener('pause', updatePlayIcon);
video.addEventListener('timeupdate', handleProgress);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);
fullscreen.addEventListener('click', toggleFullScreen);
document.addEventListener('fullscreenchange', toggleFullScreen);
document.addEventListener('mozfullscreenchange', toggleFullScreen);
document.addEventListener('webkitfullscreenchange', toggleFullScreen);
document.addEventListener('msfullscreenchange', toggleFullScreen);html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
background: #7A419B;
background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%);
background-size: cover;
align-items: center;
justify-content: center;
}
.player {
max-width: 750px;
max-height: 100%;
border: 5px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
font-size: 0;
overflow: hidden;
}
button.toggle.fullscreen::before {
font-family: "FontAwesome";
content: "\f065";
}
.player.fullscreen .player__controls .toggle.fullscreen::before {
content: "\f066";
}
/* This css is only applied when fullscreen is active. */
.player.fullscreen {
max-width: none;
max-height: none;
width: 100%;
height: 100%;
background-color: black;
}
.player.fullscreen video {
width: 100%;
}
.player__video {
max-width: 100%;
max-height: 100%;
}
.player__button {
background: none;
border: 0;
line-height: 1;
color: white;
text-align: center;
outline: 0;
padding: 0;
cursor: pointer;
max-width: 50px;
}
.player__button:focus {
border-color: #ffc600;
}
.toggle::before {
font-family: "FontAwesome";
content: "\f04b";
}
.toggle.playing::before {
font-family: "FontAwesome";
content: "\f04c";
}
.player__slider {
width: 10px;
height: 30px;
}
.player__controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: all .3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.1);
}
.player:hover .player__controls {
transform: translateY(0);
}
.player:hover .progress {
height: 15px;
}
.player__controls > * {
flex: 1;
}
.progress {
flex: 10;
position: relative;
display: flex;
flex-basis: 100%;
height: 5px;
transition: height 0.3s;
background: rgba(0, 0, 0, 0.5);
cursor: ew-resize;
}
.progress__filled {
width: 50%;
background: #ffc600;
flex: 0;
flex-basis: 0%;
}
.player__slider {
position: relative;
}
.player__slider::after {
content: attr(name);
position: absolute;
top: -2px;
text-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
font-size: 0.8em;
}
/* unholy css to style input type="range" */
input[type=range] {
-webkit-appearance: none;
background: transparent;
width: 100%;
margin: 0 5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: rgba(255, 255, 255, 0.8);
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
input[type=range]:focus::-wefbkit-slider-runnable-track {
background: #bada55;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: #ffffff;
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="player">
<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play"></button>
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button"><i class="fa fa-step-backward"></i> 10s</button>
<button data-skip="25" class="player__button">25s <i class="fa fa-step-forward"></i></button>
<button class="player__button toggle fullscreen"></button>
</div>
</div>最佳答案
问题是当我点击全屏按钮时，我的 toggleFullScreen 函数被调用了两次。我在回复 Bibek Khadka 的回答时看到了它。第一次是我点击按钮的时候，第二次是全屏模式因为这些事件监听器而改变的时候......
document.addEventListener('fullscreenchange', toggleFullScreen);
document.addEventListener('mozfullscreenchange', toggleFullScreen);
document.addEventListener('webkitfullscreenchange', toggleFullScreen);
document.addEventListener('msfullscreenchange', toggleFullScreen);
它会进入全屏模式，然后很快返回，以至于我没有看到变化。我相信第二次调用全屏 API 方法(技术上)时没有用户手势，这就是我收到错误消息的原因。
解决方案(至少现在)是创建一个单独的函数来更改类和我用来跟踪我是否处于全屏模式的变量......
function toggleFullScreenClasses() {
player.classList.toggle('fullscreen');
isFullScreen = !isFullScreen;
}
...然后我不使用它来处理按钮上的点击。我只用它来处理实际的 fullscreenchange 事件...
document.addEventListener('fullscreenchange', toggleFullScreenClasses);
document.addEventListener('mozfullscreenchange', toggleFullScreenClasses);
document.addEventListener('webkitfullscreenchange', toggleFullScreenClasses);
document.addEventListener('msfullscreenchange', toggleFullScreenClasses);
我知道这很草率，但它暂时解决了问题。我之前尝试使用 :fullscreen伪类，但我遇到了一些困难，我切换到更熟悉的切换类和变量的方法。我需要再看一看。
关于javascript - 全屏API；浏览器认为我不是以用户手势开始的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41843540/