HTML5 Video и VideoJS

В этой серии уроков мы рассмотрим HTML5 Video, а также очень популярный плеер VideoJS. Если вам нужно контролировать скорость воспроизведения или отправлять запросы AJAX на ваш сервер на основе событий плеера или даже снимать видео в виде анимированного фона - все это можна легко сделать.

• HTML5 Video 101

Прежде чем мы коснемся VideoJS, давайте сначала начнем с рассмотрения основ HTML5-видео.

• VideoJS Setup

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

• Video Event Handling 101

Затем мы рассмотрим, как реагировать на любое количество событий, связанных с видео. Возможно вы хотите записать в локальное хранилище каждые пять секунд, чтобы записать прогресс пользователя в видео. Или, возможно, вы хотите отправить запрос AJAX на ваш сервер каждый раз, когда видео будет завершено. С Video.JS легко!

• Горячие клавиши и пользовательские скорости воспроизведения

Плагиновая экосистема для VideoJS внушительная. В этом эпизоде мы рассмотрим пару плагинов, которые я использую здесь, в Laracasts.

• VideoJS Events and AJAX Requests

Давайте рассмотрим полный пример того, как вы можете отправить запрос AJAX на ваш сервер как только видео завершится. Возможно вы разрешаете своим пользователям отмечать видео как «завершенные» (как вы можете здесь, в Ларакасте). Давайте посмотрим, как это сделать. Во-первых, в этом уроке мы подготовим базовый код Laravel, а затем применим некоторые довольно простые JavaScript и jQuery для отправки запроса AJAX. В следующем видео мы перейдем к использованию npm и Vue.

Посмотрите источник этого урока на GitHub.