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

0
i n v i n c i b l e 27 Окт 2019 в 11:38
2
Есть ли причина, по которой вы используете этот тег вместо видео?
 – 
Kaiido
27 Окт 2019 в 11:41

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; } 
0
Max Voisard 27 Окт 2019 в 13:31