Когда я просто использую <embed src="examplevideo.mp4">
, он работает ТОЛЬКО на веб-странице, полноэкранная кнопка просто неактивна, и я не могу ее щелкнуть. Я пытался найти это, но ничего не нашел. Пожалуйста помоги!
1 ответ
Вам не обязательно использовать тег <embed>
. Вместо этого попробуйте использовать тег <video>
вместе с этим фрагментом кода. Вы также можете использовать <iframe>
с атрибутом allowfullscreen
, установленным в "true", но я не буду его рассматривать в этом примере. Обратите внимание, что попытка запустить этот фрагмент кода в Stack Overflow не работает, так как должна быть какая-то функция, блокирующая его, но она работает в этом JSFiddle, который я сделал: https://jsfiddle.net/pa85umLo/. Еще одно важное замечание заключается в том, что полноэкранный API работает не во всех браузерах, особенно в мобильных браузерах, поскольку они работают над новой вещью. Последнее важное замечание: кнопка «Полноэкранный режим», которую я предоставил, предназначена только для резервного копирования, если кнопка переключения на элементах управления видео не появляется; кнопка переключения была там в дополнение к моей кнопке при создании JSFiddle, но иногда она не появляется по умолчанию, как в SO, как я сказал ранее. Селектор CSS предназначен только для Chrome.
HTML:
<div id="wrapper">
<section>
<video id="video" width="490" height="276" controls>
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4">
<p>
Your browser doesn't support HTML5 video.
</p>
</video>
</section>
<button id="video-button">Fullscreen Video</button>
</div>
JS:
var requestFullscreen = function (element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
console.log('Fullscreen API is not supported.');
}
};
var fullscreenVideo = document.getElementById('video-button');
var video = document.getElementById('video');
fullscreenVideo.addEventListener('click', function(e) {
e.preventDefault();
requestFullscreen(video);
});
CSS:
video::-webkit-media-controls-fullscreen-button { visibility: visible; }
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].