Улучшаем видеоплеер в Articulate Storyline

Видеоролики широко применяются в электронных курсах — это не секрет. Как и любой другой уважающий себя редактор электронных курсов, Articulate Storyline ещё с первых версий «умеет» вставлять на слайд видеоролики. И каждый разработчик электронных курсов, который применяет эту функцию, знает, что стандартный видеоплеер обладает крайне скромным функционалом, тогда как его браузерные собратья умеют гораздо больше:

  • Регулировать звук
  • Увеличивать или уменьшать скорость воспроизведения видеоролика
  • И наконец — разворачивать видео на весь экран.

В этой статье мы научимся добавлять весь этот, безусловно, полезный функционал в электронный курс. И вы убедитесь, что это очень просто.

1. Добавляем ролик на слайд.

Процесс вставки ролика на слайд очень прост и не вызовет трудностей. В Storyline заходим на вкладку Insert и нажимаем Video. В инспекторе файлов выбираем нужный файл с видеороликом.

На скриншоте кнопка Video находится справа

2. Настраиваем ролик

Установите нужный размер видео, выравняйте как вам необходимо. В нашем случае видео можно сделать даже весьма небольшого размера, ведь его можно будет развернуть на весь экран!

В первую очередь необходимо убедиться, что штатные кнопки видеоплеера не будут отображаться на слайде. Для этого выбираем ролик и заходим на вкладку Options. Убедитесь, что настройки такие же как на скриншоте.

Настройки видеоролика в Articulate Storyline 360

3. Добавляем кнопки управления в плеер

Теперь начинается самое интересное. Любой опубликованный курс по своей сути — веб-приложение, предназначенное для воспроизведения в браузере, поэтому для всех его элементов доступны стандартные возможности редактирования. Чтобы получить к ним доступ, воспользуемся языком программирования JavaScript.

Для начала создадим триггер, исполняющий JavaScript, как только загружается слайд с видео. В правой панели Triggers нажимаем Create trigger (кнопка в виде листочка бумаги).

Кнопка создания триггера — крайняя слева

Далее выбираем Action — Execute JavaScript, в строке When выбираем When the timeline starts on this slide.

Триггер, запускающий javascript на слайде

Нажимаем синюю надпись JavaScript. Перед нами открывается окно редактора кода (редактор — это конечно громко сказано). В редактор добавляем следующий код:

document.getElementsByTagName("video")[0].setAttribute("controls", "true");

Что делает этот код? Всё просто — он ищет в загруженном в браузер курсе любой элемент с тегом <video> и устанавливает ему атрибуты, включающие управляющие кнопки. Ниже вы видите пример того, как выглядит «прокачанный» видеоплеер на слайде.

powered by Advanced iFrame. Get the Pro version on CodeCanyon.

Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.