У меня проблема с видеоэлементом HTML5, когда он воспроизводится в полноэкранном режиме на некоторых устройствах Android.
Я создал кодовую ручку, чтобы показать проблему, ее можно найти здесь
Это просто элемент видео HTML5 с некоторыми js и css, чтобы воспроизвести проблему, нажмите на полноэкранную кнопку, затем через 2/3 секунды нажмите на перезагрузку, подождите 2/3 секунды и делайте это, пока видео не остановится.
Полноэкранный режим не является «настоящим» полноэкранным, он установлен на теле, потому что мне нужно отображать элемент во время воспроизведения видео, поэтому он не установлен на видео
ЭтоВозможно, что ваш телефон не подвержен этой ошибке.Он был протестирован на Huawei P20 с версией 9 Android и Google Chrome 73.0.36.83.90 и Samsung Galaxy S8 +
Спасибо за вашу помощь
document.addEventListener('DOMContentLoaded', function(e) {
var isFullscreen = false;
var video = document.querySelector('video');
var fullScreen = function fullScreen(elem, cancel) {
var func = 'RequestFullScreen';
var elFunc = 'requestFullScreen'; //crappy vendor prefixes.
isFullscreen = !isFullscreen;
if (cancel) {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
} else {
try {
if (elem[elFunc]) elem[elFunc]();
else if (elem['ms' + func]) elem['ms' + func]();
else if (elem['moz' + func]) elem['moz' + func]();
else if (elem['webkit' + func]) var res = elem['webkit' + func]();
} catch (e) {
console.log('error fullscreen');
}
}
};
var buttonFullscreen = document.querySelector('.fullscreen');
buttonFullscreen.addEventListener('click', function() {
fullScreen(document.getElementsByTagName("BODY")[0], isFullscreen);
});
var buttonReload = document.querySelector('.reload');
buttonReload.addEventListener('click', function() {
video.load();
});
});
video {
width: 100%;
}
button {
height: 40px;
width: 100px;
position: absolute;
top: 10%;
left: 40%;
}
button.reload {
position: absolute;
left: 60%;
}
<video class="vjs-tech" muted="muted" data-index="0" src="https://www.w3schools.com/html/mov_bbb.mp4" id="vjs_video_3_html5_api" style="display: block;" tabindex="-1" autoplay>
</video>
<button class="fullscreen">fullscreen</button>
<button class="reload">reload</button>