DigitalLearning

Видеоплеер

❤️
Огромная благодарность за материал Александру и Олегу (@obuylov)! Баг репорты и вопросы: alexander_k89@mail.ru

Про видеоплеер.

notion image
Всем привет. Кто страдал от стандартного видео плеера в сторилайне есть хорошие новости - мы сделали веб объект, который позволяет быстро вставлять большое количество видео в курс, видео плеер имеет нормальный функционал и интегрирован с сторилайном (плеер передает в сторилайн события связанные с видео и принимает от сторилайна данные).

Что в нем есть, чего нет в сторилайновском плеере:

  • Регулировка громкости видео
  • Регулировка скорости воспроизведения видео
  • Возможность развернуть видео на весь экран
  • Перемотка и воспроизведение с любой секунды по кнопкам в сторилайне
  • Приостановка воспроизведения в заданную в сторилайне секунду
  • Передача статистики по xApi

Из интеграции:

  • Воспроизведение/Паузу можно вызывать триггерами в сторилайне
  • Веб объект тригернет переменную сторилайна когда видео закончится
  • Все видео можно вставить в курс через один веб объект

Как пользоваться:

  1. Сохраняем веб объект из приложенного исходника
  1. Удаляем демо видео из папки с веб объектом
  1. Добавляем свои видео в папку с веб объектом
  1. Вставляем веб объект в сторилайн
  1. Управляем веб объектом с помощью переменных в сторилайне
⚠️
Upd. 14.02.2022 - теперь необязательно добавлять переменные в сторилайне. Можете добавлять только те, которые вам необходимы. См. блок с обновлениями в самом низу.

Использование xApi:

  • Добавить в сторилайн переменную videoEnableXAPI типа true/false и установить в true
Или:
  • В корне веб-объекта в файле config.js в объекте conf добавить:
const conf = {
...
	xApi: {
		enable: true,
	},
...
};
Если курс собран в xApi, а не SCORM, то дальше все будет работать, однако ряд данных можно подставлять самому.
 

Если используется Scorm или возникли проблемы, то:

Авторизацию можно прокинуть вручную. Есть на выбор 2 способа:
  1. В корне веб-объекта в файле config.js в объекте conf добавить:
const conf = {
...
	xApi: {
		enable: true,
	  auth: "Ваш токен авторизации",
	  endpoint: "Ваш url с LRS",
	},
...
};
  1. Добавить переменные videoAuth_xApi и videoEndpoint_xApi и вписать данные туда.
Подставлять надо без конвертации в base64 строку.
 
Сначала плеер будет пытаться взять из файла config.js, затем из переменных в storyline. Если auth и endpoint не будут получены, то в консоль браузера будет выведена ошибка, а стейтменты не будут отправляться.
 
Actor можно прокинуть вручную через переменные storyline и будет выглядеть как представлено ниже. Переменные подставятся в соответствующие поля:
{
...
	actor: {
	  objectType: "Agent",
	  name: videoActorName_xApi,
	  account: {
	    homePage: videoActorHomepage_xApi,
	    name: videoUserId_xApi,
	  },
	};
...
}
Если Actor не был найден в URL строке и переменные не были установлены, то будут подставлены стандартные значения.
 

Object Id для стейтмента собирается из трех частей:

videoCourseId_xApi + / + videoSlideId_xApi + / + videoName_xApi
Если videoCourseId_xApi или videoCourseId_xApi не предоставлены, то вместо них подставляются стандартные значения. Вместо videoName_xApi подставляется имя файла.

Видеоплеер передаёт следующие стейтменты:

Initialized в момент как веб объект загрузился на слайде
Played при проигрывании
Paused при паузе (+ сегмент от play до pause)
Seeked при перемотке (+ сегмент от старта до завершения завершения)
Completed при полном просмотре видео
Terminated при закрытии веб объекта с видео

Storyline проект с демо работы, собранный курс для тестов (VideoPlayer.zip) и web-объект (build.zip):

Исходники
⚠️
Для работы плеера необходимо загрузить курс в LMS.
Переменные
Название
Тип
Значение по умолчанию
Назначение
Комментарии
videoAutoplay
True/False
false
Воспроизводить ли автоматически
Если переменная в сторилайне установлена в true, то видео запустится сразу после прогрузки веб объекта. Переменную необходимо установить до прогрузки веб объекта с видео.
videoPreload
String
"auto"
Способ подгрузки видео
Если переменная в сторилайне установлена в: "auto" - видео будет загружаться на компьютер пользователя до начала воспроизведения. "none" - видео не будет загружаться до нажатия кнопки плей. Значение переменной необходимо установить до прогрузки веб объекта с видео.
videoFileName
String
video.mp4
Название файла с видео
В переменную необходимо установить название видео вместе с расширением. Веб объект будет воспроизводить видео, указанное в этой переменной. Значение переменной должно быть установлено до прогрузки объекта с видео.
videoReady
True/False
false
Событие "Плеер готов"
Плеер устанавливает значение в true в момент когда веб объект прогружен и готов к запуску видео. Полезно, чтобы поставить в артикулейте заглушку пока происходит загрузка веб объекта артикулейтом. Если используете, требуется устанавливать в false до прогрузки веб объекта с видео.
videoPlay
True/False
false
Запуск видео
При установке в true вызывает запуск воспроизведения видео. После старта воспроизведения (или в случае, если видео уже воспроизводится), плеер устанавливает значение в false. Можно устанавливать в любой момент. Не используйте для автоматического воспроизведения видео при старте слайда.
videoPause
True/False
false
Пауза видео
При установке в true вызывает паузу воспроизведения видео. После паузы воспроизведения (или если видео уже на паузе), плеер устанавливает значение в false. Можно устанавливать в любой момент.
videoCompleted
True/False
false
Событие "Видео завершено"
Плеер устанавливает значение в true в момент когда видео завершено. Используется для имитации триггера when media completed. Плеер устанавливает в значение false в момент старта вопспроизведения видео.
videoPlayFromTime
Number
-1
С какой секунды запустить видео
Значение от 1 до N в секундах, где N это длина видео в секундах. Может быть установлено в любой момент. Перемещает секунду воспроизведения видео на значение, указанное в переменой. После перемещения плеер установит значение переменной в -1.
videoPauseAfterTime
Number
-1
На какой секунде остановить видео
Значение от 1 до N в секундах, где N это длина видео в секундах. Может быть установлено в любой момент. Видео будет остановлено в момент когда время воспроизведения видео превысит значение в этой переменной. (Превысит значит, что если должно остановиться на 10 секунде, а пользователь перемотал видео на 20 секунду, то остановка также произойдет). После срабатывания паузы - плеер установит значение -1.
videoPausedAfterTime
True/False
false
Событие "Видео остановлено"
Плеер устанавливает значение в true в момент когда сработала пауза. (Можете использовать переменную для перехвата события внутри сторилайна). Плеер устанавливает значение в false в момент старта воспроизведения видео.
videoMuted
True/False
false
Запустить ли видео без звука
Если переменная в сторилайне установлена в true, то громкость видео будет выставлена в 0. Переменную необходимо установить до прогрузки веб объекта с видео.
videoFluid
True/False
true
Растягивать ли видео на всю ширину веб-объекта
Если переменная в сторилайне установлена в false, то видео перестанет растягиваться на всю ширину. Переменную необходимо установить до прогрузки веб объекта с видео. Описание работы см. ниже в обновлении от 14.02.2022
videoWidth
Number
0
Ширина видеоплеера
Описание работы см. ниже в обновлении от 14.02.2022
videoHeight
Number
0
Высота видеоплеера
Описание работы см. ниже в обновлении от 14.02.2022
videoBackgroundColor
String
#000000
Цвет фона видеоплеера
Определяет цвет фона видеоплеера. Описание работы см. ниже в обновлении от 14.02.2022
videoEnableXAPI
True/False
false
Включает xApi
Включает отправку стейтментов, если установлено в true
videoCourseId_xApi
String
-
Устанавливает actionId
В случае отсутствия будет подставлено значение https://no.course.id.provided
videoSlideId_xApi
String
-
Устанавливает slideId
В случае отсутствия будет подставлено значение noSlideId
videoUserId_xApi
String
-
Устанавливает userId
В случае отсутствия Actor в URL строке запуска курса и отсутствия переменной, будет подставлено значение noUserId
videoActorName_xApi
String
-
Устанавливает actor name
В случае отсутствия Actor в URL строке запуска курса и отсутствия переменной, будет подставлено значение noActorName
videoActorHomepage_xApi
String
-
Устанавливает actor home page
В случае отсутствия Actor в URL строке запуска курса и отсутствия переменной, будет подставлено значение noHomepage
videoAuth_xApi
String
-
Авторизационные данные
Если auth нет в URL строке запуска курса, то берется из файла config.js. Если нет там, то берется из этой переменной
videoEndpoint_xApi
String
-
URL к LRS
Если endpoint нет в URL строке запуска курса, то берется из файла config.js. Если нет там, то берется из этой переменной
videoName_xApi
String
-
Заменяет имя видео
В случае отсутствия будет использоваться имя файла с видео
Файл config.js
Файл расположен в папке с веб объектом. Дает возможность подгрузить стартовую заставку к видео. Открываете файл блокнотом - в usePoster пишете true. В fileName - имя файла с постером (в кавычках).

Важные нюансы:

  • Плеер точно работает в форматом mp4, кодеком h264. Остальные форматы/кодеки не тестировались.
  • Видео занимает всю ширину веб объекта. Веб объект в сторилайне должен иметь такие же пропорции как видео. Т.е. если видео имеет соотношение сторон 16:9, то веб объект должен иметь такое же соотношение сторон, для 16:9, например 1280х720 или 1920х1080. Почему это важно? Представим у вас квадратное видео с соотношением сторон 1:1. Если вы вставите веб объект в курс размером 100х100 пикселей. то все будет ок. Если 100х110 - то в большинстве случаев тоже все будет ок. А вот если 100х90, то вы потеряете 10 пикселей от видео снизу (там где панель управления видео).
  • Плеер периодически будет обновляться - новую версию можно будет найти в исходнике

Обновления:

От 14.02.2022
  • Убрана жесткая привязка плеера с сторилайну. Теперь видеоплеер можно использовать в сторилайне без создания переменных или с созданием только тех переменных, которые нужны. В случае, если переменная с названием видео не используются, то имя видео в папке должно быть video.mp4
  • Убрана настройка videoFullscreen. При завершении проигрывания видео будет пытаться выйти из фуллскрина, если находится в нём.
  • Убрана настройка videoLoop.
  • Добавлена настройка videoMuted. Если переменная в сторилайне установлена в true, то видео запустится со звуком выкрученным в ноль. Переменную необходимо установить до прогрузки веб объекта с видео.
  • Добавлена настройка videoFluid. При установке в false отключит растягивание видеоплеера на всю ширину веб объекта. Видеоплеер будет иметь размер по размеру видео. При установке videoFluid в false становится доступным 2 других настройки: videoWidth (number), videoHeight (number). Переменные videoWidth и videoHeight определяют ширину и высоту видеоплеера. !Важно. ВИДЕОПЛЕЕРА, а не видео. Т.е. если у вас видео 100 на 100 пикселей, а videoWidth=300 и videoHeight=100, то видео плеер займет область 300х100 пикселей. А само видео будет в центре видеоплеера. Свободные от видео, зоны видеоплеера будут иметь черный цвет, который можно поменять как описано ниже. Плеер точно работает в форматом mp4, кодеком h264. Остальные форматы/кодеки не тестировались.
  • Добавлена настройка настройка videoBackgroundColor. Позволяет менять цвет фона под видео. Цвет передавать в формате #000000. Фон виден в двух случаях: 1. когда загрузился видеоплеер и еще прогружается видео. 2. когда пропорции видеоплеера отличаются от пропорций видео.
От 16.03.2022
badge