Как управлять видео HTML5 с помощью JavaScript?

Question

Я так много искал об управлении видео HTML5, и я застрял в управлении видео с помощью javascript. В приложении есть правило, которое вы должны знать.

Пользователь не будет взаимодействовать с браузером в любое время .

Я пытаюсь достичь
1) Откройте видео в полноэкранном режиме и воспроизводите видео
2) Когда видео закончится, закройте видео, и видео исчезнет с экрана, поэтому HTML-контент будет виден.
3) Элементы управления отображением видео не будут видны постоянно.

Какой самый простой способ выполнить такие действия с помощью JavaScript?

Answer 1

VideoJS - это чистый видеопроигрыватель на основе CSS с открытым исходным кодом. Это мой единственный выбор, если я собираюсь решить эту проблему с HTML5.

Для управления видео VideoJS имеетнекоторые варианты в начале.

$("video").VideoJS({ 
      controlsbelow: false,
      showControlAtStart: false
});

Для проблемы Full Screen , я нашел свое собственное решение, я хочу поделиться им с вами.Так как я знаю размер экрана, я сделал панель выше всего контента.

.fullscreen {
    width:1280px;
    height:800px;
    z-index:10001;
    top:0;
    left:0;
    position:fixed;
}

Обратите внимание, что браузер работает в полноэкранном режиме, поэтому не смешивайте это с обычным полноэкранным разрешением видео контента.

В конце моего видео я изменяю видимость на скрытую (отображение: нет)

$("video").bind("ended", function () {
      $("#videoContainer").removeClass("fullscreen").addClass("hidden");
});

Затем окно контейнера и видеоконтент становятся полноэкранными.Спасибо всем.

Answer 2

Чтобы скрыть элементы управления, просто не указывайте атрибуты элементов управления на элементе on video.

Вы можете войти в полноэкранный режим, например, когда пользователь нажимает кнопку, но вы не можете выйти из полноэкранного режима, когда видео заканчиваетсяс событием «закончилась».

Таким образом, вы не можете комбинировать exitfullscreen с событием «закончилась».

Это, кажется, сделано в porpuse, так что вы можете входить и выходить из полноэкранного режима только тогда, когда пользовательделает что-то.

Демо: http://netkoder.dk/test/test0267.html

Answer 3

1) Что касается полноэкранного режима:

Есть ли способ сделать HTML5 видео полноэкранным?

2) возможно, вы могли бы рассмотреть возможность использования плагина jQuery вроде лайтбокса, возможно, что-то вроде this

РЕДАКТИРОВАТЬ: и проверить ответ @ Mzialla.

3) Что касается видеоплеера, проверьте это:

http://videojs.com/

Удачи!