HTML 5 Видео тег не показывает полноэкранную кнопку - PullRequest
Новая
       22

HTML 5 Видео тег не показывает полноэкранную кнопку

0 голосов
/ 22 января 2020

Я пытаюсь получить видео с тегом video для включения полноэкранного режима в элементах управления. Если я вставляю видео на сайт, используя следующее: 

<video controls>
    <source src="filename.mp4 " type="video/mp4">
</video>

Я не получаю кнопку полного экрана.

enter image description here

Интересно, что когда вы смотрите на w3schools , пример на странице показывает полноэкранный режим, но когда вы нажимаете Try me , это не так.

enter image description here

Может быть потому, что тег находится внутри фрейма? Есть ли способ обойти это?

1 Ответ

1 голос
/ 23 января 2020

«Может быть, потому, что тег находится внутри фрейма? Есть ли способ обойти это?»

Да, это может быть причиной после некоторого расследование. Размещение тега <video> внутри <iframe> приведет к исчезновению полноэкранной кнопки в Firefox.

Относительно W3Schools ...

  • Создание первой страницы фактический тег видео (см. строку 1143 исходного кода).

  • На второй странице " Попробуйте сами " они на самом деле создание iframe (см. строку 541 исходного кода страницы " Try it "): var ifr = document.createElement("iframe"); et c.

Решение :
В коде iframe добавьте allowfullscreen, webkitallowfullscreen и mozallowfullscreen.

При использовании <iframe> для загрузки другой страницы HTML (которая содержит показанный код <video>), затем попробуйте: 

<!DOCTYPE html>
<html>
<body>

<iframe width="800" height="600" src="video_page.html" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe>

</body>

PS:

"Если я вставлю видео на сайт, используя следующий ... [см. опубликованный код] "

Ваш опубликованный код работает нормально. Тег <video> на веб-странице должен иметь полноэкранные элементы управления. Проблема, которую вы описываете, появляется только при использовании <iframe>.

...