Когда я просто использую <embed src="examplevideo.mp4">, он работает ТОЛЬКО на веб-странице, полноэкранная кнопка просто закрашена, и я не могу щелкнуть ее. Я пытался найти это, но ничего не смог найти. Пожалуйста помоги!

0
i n v i n c i b l e

1 ответ

Вам не нужно использовать тег <embed>. Попробуйте использовать тег <video> вместо этого фрагмента кода. Вы также можете использовать <iframe> с атрибутом allowfullscreen, установленным в значение "true", но я опущу это в этом примере. Обратите внимание, что попытка запустить этот фрагмент кода при переполнении стека не работает, так как должна быть какая-то функция, блокирующая его, но она работает в этом 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; } 
58577774