В этой серии уроков мы рассмотрим 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.
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
HTML5 Video and VideoJS,
а также все другие курсы, прямо сейчас!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
HTML5 дает нам богатый медиа ресурс и эффекты. В этом курсе вы получите практические примеры создания собственных медиа-плееров на HTML5 API. Вы будете погружаться в поддержку камеры с GetUserMedia, WebRTC для общения в реальном времени, видеоэффектов с canvas, и познакомитесь с Web Audio API, для поддержки аудио.
frontendmasters