Интерактивное видео

И вот, когда мы попрактиковались в составлении викторин, созданиилент времени и интерактивных плакатов, настала пора смастерить (та-дам!) нечто грандиозное. Так как насчет интерактивного видео в сервисе H5P?

Не секрет, что главная проблема при просмотре учебных (и не только) видеороликов — это пассивность зрителей. А очень хочется прикрепить к видео интересные задания и викторины, организовать опрос или обсуждение, снабдить видеоролик дополнительной информацией или ссылками на веб-ресурсы. То есть сделать видео интерактивным.

Таким видеосюжетам найдется применение и в школе (учебные видеоролики с заданиями), и в библиотеке (видеовикторины). Давайте уже попробуем, что это за штука такая...

Для примера Полярная Сова смастерила вот такое видео про витаминки. Здесь есть меню (нажимаем на "флажок") и несколько разных тестовых заданий (отмечены на временной шкале точками).

https://h5p.org/h5p/embed/45270

А теперь подробнее, как смастерить такое видео.

Регистрация + загрузка + настройки

Если вы впервые заглянули на сайт сервиса, нужно зарегистрироваться (подробнее о регистрации -здесь).

В личном кабинете нажимаем “Create New Content”, придумываем название для будущего видеоролика (Title) и выбираем из выпадающего списка подходящий шаблон. Называется он "Interactive Video".

Для загрузки видео нажимаем на значок “+”. Добавить видео можно, загрузив его с ПК (размер - не более 16 мегабайт) или по ссылке с YouTube. Нажимаем “Insert”.

При необходимости можно добавить информацию о копирайте (Edit copyright), указав название видео, его автора, источник, вид лицензии.

В подразделе “Start screen options” можно установить логотип, который будет показать в начале видео. Опция не действует для видео с YouTube. Размер логотипа (стартового изображения) - не более 16 мегабайт. К изображению можно добавить краткое описание (необязательно) и добавить опцию не показывать название на слайде с изображением.

А в подразделе "Text tracks" можно добавить субтитры, но тоже только для видео не с YouTube.

Ещё один полезный раздел - “Behavioural settings”. Здесь устанавливаем настройки показа видео: автовоспроизведение и воспроизведение "по кругу", показ кнопок "Показать решение" и "Попробовать ещё раз" (“Enabled” - показывать, “Disabled” - не показывать), отключение звука, показ меню и т.д.

В разделе "Text overrides and translations" корректируем надписи, которые будут появляться на экране во время просмотра видео. Вот некоторые варианты перевода:

  • “Text displayed before number of statements solved in the summary task” - текст, который будет появляться по итогу выполненных заданий, например, “Выполнение заданий” или "Результат";

  • “Text displayed before number of wrong statements selected in the summary task” - текст, который будет сообщать в итоге о неправильно выполненных заданиях, например: “Количество неверных ответов”;

  • “Summary feedback header” - заключительная фраза, например: “Ваш результат”;

  • “You got :num out of :total points” можно заменить фразой “Вы получили :num из :total баллов”.

На самом деле надписей для перевода здесь огромное количество: создатели сервиса предусмотрели практически любой вариант развития событий. Можно перевести на русский сразу всё, а можно выбрать только самое нужное (отмечено красными звёздочками). Чтобы не растеряться, предлагаю воспользоваться подсказками (картинки ниже можно листать стрелочкой).

Такие разные интерактивности

Делаем глубокий вдох - самое скучное позади. Начинается творчество. Что же можно натворить, собственно?

На основе одного видео можно создать интерактивную викторину, прикрепить к видеоролику задания-утверждения, задания-ветвления, задания на добавление пропущенных слов, прикрепить комментарии и изображения, добавить ссылки на другие веб-ресурсы, создать меню для более удобного просмотра и многое-многое другое.

Открывается новая страница. Переходим во вкладку “Edit” и далее - “Add interactions”. В центре - видео для редактирования. Вверху - панель инструментов для добавления разных интерактивных элементов.

Смотрим и удивляемся. Итак, слева направо:

1. Надпись (Label).

2. Текст (Text).

3. Таблица (Table).

4. Ссылка (Link).

5. Изображение (Image).

6. Викторина на основе утверждений (Statements).

7. Вопрос с одним правильным ответом (Single Choice Set).

8. Вопрос с несколькими правильными ответами (Multiple Choice).

9. Вопрос "Правда или ложь?" (True/False Question).

10. Задание "Заполни пропуски" (Fill in the Blanks).

11. Задание "Drag and Drop".

12. Задание "Отметь слова" (Mark the Words).

13. Задание "Перенеси слова" (Drag Text).

14. Вопрос-ветвление (Crossroads).

15. "Горячая точка" (Navigation Hotspot).

16. Анкета (Questionnaire).

17. Вопрос с текстовым ответом (Free Text Question).

Все интерактивные элементы добавляются “перетягиванием” их на экран “мышью” в нужный момент видео. Принцип работы одинаковый: проигрываем видео до необходимого момента, ставим на “паузу” и переносим на экран нужный значок. Открывается окошко редактора, в которое вписываем нужную информацию, устанавливаем время появления и исчезновения интерактивности на экране (по умолчанию - 10 секунд), при необходимости устанавливаем опцию “Остановить видео на время показа". Нажимаем “Done”.

Вот так, например, выглядит редактор для создания надписи из одного или нескольких слов (Label).

А это уже добавление текста.

Можно выбрать вид показа: как текстовое окошко (Poster) или как кнопку (Button).

Так же легко можно добавить таблицу.

Заполняем колонки - и нажимаем "Done".

Для добавления ссылки переносим на экран значок в виде цепочки (Link). Дополнительно можно указать цвет ссылки и добавить тень.

Ну и, наконец, добавляем картинку...

Здесь настроек чуть больше. Можно указать альтернативный текст (текст, который будет появляться на экране, если изображение не удастся загрузить) и текст, который появится при наведении курсора на изображение (необязательно). Для картинки можно подобрать фон и тень.

Но это ещё не всё! В разделе “Go to on click” можно прикрепить к изображению ссылку на другую веб-страницу (из выпадающего списка “Type” выбираем “Another Page (URL)” и указываем ссылку) или сделать отсылку к определенному моменту видео (из выпадающего списка “Type” выбираем “Time Code” и указываем временную отсечку видео в формате “минуты: секунды” в графе “Go To”). “Кликабельность” изображения можно показать зрителю, для этого ставим “галочку” напротив “Visualize”. Нажимаем “Done”.

Викторины, задания, упражнения...

Практически для всех заданий, вопросов и упражнений сервис предусмотрел одинаковую настройку - “Adaptivity”. В этом разделе указываем порядок действий при правильном и неправильном ответах (настройка необязательная, но всё же...):

  • перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);

  • разрешить пропустить вопрос и продолжить;

  • показать текстовое сообщение.

А теперь подробнее о вопросах и заданиях...

Викторина на основе утверждений (Statements)

В графу “Introduction text” вписываем задание, например: “Выберите из предложенных утверждений верное”. В графы “Statement” вносим утверждения, первое из них - верное. В разделе “Tip” можно добавить подсказку отвечающему.

В разделе "Overall Feedback" можно настроить обратную связь. Нажимаем "Add Range" и добавляем оценки в зависимости от количества правильных ответов. Например, если правильных ответов всего 20%, выбираем оценку "неплохо", если от 20 до 80% - "хороший результат", от 80 до 100% - "отлично". Кстати, сервис может распределить оценки автоматически: достаточно нажать "Distribute Evenly".

К одному моменту видео можно добавить несколько заданий-утверждений. Чтобы добавить новый набор утверждений, нажимаем большую синюю кнопку “Add statements”.

Вопрос с одним правильным ответом (Single Choice Set)

К одному моменту видео можно прикрепить сразу несколько вопросов. Первый вариант ответа верный, остальные - неверные. Чтобы добавить ещё вариант ответа, нажимаем “Add answer”.

В разделе "Overall Feedback" настраиваем обратную связь. Нажимаем "Add Range" и добавляем оценки в зависимости от количества правильных ответов. Например, если правильных ответов всего 20%, выбираем оценку "неплохо", если от 20 до 80% - "хороший результат", от 80 до 100% - "отлично". Кстати, сервис может распределить оценки автоматически: достаточно нажать "Distribute Evenly".

В разделе “Behavioural settings” можно установить время паузы в случае верных и неверных ответов, включить звуковые эффекты, кнопку повтора вопроса и кнопку “Показать решение”.

Вопрос с несколькими верными вариантами ответа (Multiple Choice)

К одному моменту видео можно прикрепить сразу несколько вопросов: вписываем в нужные окошки вопрос и варианты ответов. Правильные ответы помечаем галочкой. В разделе “Tips and feedback” можно добавить подсказки и обратную связь к каждому варианту ответа, а в разделе "Media" - прикрепить к вопросу видео или картинку.

В разделе “Behavioural settings” доступно несколько дополнительных настроек:

  • включить кнопки “Показать решение” и “Попробовать ещё раз”;

  • выбрать тип кнопки для ответа из выпадающего списка (автоматические, флажки, радиокнопки);

  • давать один балл только за выполнение всего задания целиком;

  • перемешивание ответов;

  • требование решения перед показом ответа;

  • отмена масштабирования изображения;

  • показ диалога подтверждения на проверку решения и показ правильного ответа.

И еще немножко настроек:

Вопрос "Правда или ложь?"(True/False Question)

Всё просто: в графу “Question” вносим какое-нибудь утверждение и отмечаем, правда это или нет. В разделе “Media” можно прикрепить изображение (Image) или видео (Video) к заданию.

И настройки к заданию:

Задание с заполнением пропусков (Fill in the Blanks)

Добавляем инструкцию и текст с пропущенным словом. Пропущенное слово выделяется в тексте “звездочками” с двух сторон. Можно добавить неправильный вариант ответа: в этом случае варианты нужно разделить косой чертой (/). Если необходимо добавить подсказку, ее добавляют после вариантов ответа и ставят перед ней двоеточие. Пример текста с пропуском: Сервис работает в *браузере / мобильном приложении : то, чем вы пользуетесь каждый день*.

К одному моменту видео можно привязать несколько текстов с пропусками. Чтобы добавить новый текст, нажимаем “Add text block”.

А ещё к вопросу можно добавить изображение (Image) или видео (Video), выбрав их из выпадающего списка в разделе “Media”.

В разделе “Behavioural settings” доступно несколько дополнительных настроек:

- включить кнопки “Показать решение” и “Попробовать ещё раз”;

- автоматическая проверка ответа;

- убеждаться, что слово написано точно так же, как и в ответе;

- требовать заполнить все поля перед показом ответа;

- показывать поля для ввода данных отдельными строками;

- отмена масштабирования изображения;

- показ диалога подтверждения на проверку решения и показ правильного ответа.

Задание "Drag and Drop" (дословно: "Тяни и бросай")

Для начала в разделе "Settings" придумываем задание. Например: "Как называется это животное? Перенесите "мышью" на изображение верный ответ" и загружаем картинку, к которой нужно будет подобрать пару: текст, слово, изображение. На языке сервиса картинка называется "территорией вброса".

В разделе "Task" нажимаем на значок с изображением точки (Insert Drop Zone) и перетягиваем его на нашу картинку. Появляется рамочка, обозначающая границы "территории вброса". Границы можно растянуть на всё изображение или только на его часть.

Добавляем варианты ответа на задание. Выбираем значок "Text" и переносим его на картинку, вписываем нужный вариант ответа, меняем границы, если надо. Если вариант ответа - это картинка, выбираем значок "Image" (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

Возвращаемся к основной картинке. Нажимаем на значок "карандашик" над ней и попадаем в редактор. Здесь "привязываем" картинку к нужному варианту ответа, отметив его галочкой, и, если надо, устанавливаем прозрачность изображения (чтобы его выделить). Не забываем нажать "Done".

Добавляем обратную связь (если нужно).

И ещё немножко настроек.

Задание с выделением слов (Mark the Words)

Добавляем инструкцию к заданию и даем список слов для выделения правильных. Правильные слова в списке выделяются звездочками с двух сторон, например: *правильный ответ*.

В разделе "Overall Feedback" можно настроить обратную связь (как в случае с заданием "Drag and Drop"). А в разделе “Behavioural settings” - включить кнопки “Правильный ответ” и “Попробовать ещё раз”.

Задание с переносом слов (Drag Text)

Очень похоже на задание "Fill in Blanks", только слова для заполнения пропусков в тексте нужно брать из предложенного списка.

В разделе “Task description” - задание к упражнению. В разделе “Textfield” помещаем текст с пропусками, которые нужно заполнить. Нужное слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло - столица *Норвегии*.

А это нужные настройки.

Вопрос-ветвление (Crossroads)

Очень интересный вопрос. Чтобы его добавить, проигрываем видео до необходимого момента, ставим на “паузу” и переносим на экран соответствующий значок. Устанавливаем время появления и исчезания вопроса на экране (по умолчанию - 10 секунд), при необходимости устанавливаем опцию “Остановить видео на время показа задания”.

Задается вопрос и дается несколько вариантов ответа на него. Каждый ответ - это ссылка на определенное время демонстрации видео, которое вписывается вручную в формате “М:СС”, где М - минуты, С - секунды. Закончив настройки, нажимаем “Done”. Следующий вопрос добавляется нажатием кнопки "Add choice".

"Горячие точки", закладки и меню

“Горячая точка” (Hot Spot) - это область видео, содержащая ссылку на какой-либо веб-ресурс. К “горячей точке” в конструкторе прикрепляем ссылку: на определенный фрагмент видео (Timecode) или на определенный веб-ресурс (Another page (URL)). В первом случае указываем временную отсечку в формате “М:СС”, где М - минуты, С - секунды. Во втором случае вставляем в открывшееся окно ссылку. Также можно выбрать форму (Rectangular - прямоугольная; Circular - круглая) и цвет “горячей точки”.

Кстати, к “горячей точке” можно добавить курсор-указатель и мигающий эффект.

Закладки, меню, анкеты

Из последних нововведений сервиса - возможность добавить анкету к видео. Для этого нажимаем кнопку "Questionnaire".

В анкету можно добавить два вида вопросов: открытый (Open Ended Question) и вопрос с вариантами ответов (Simple Multi Choice) - с одним (Single Answer) или несколькими (Multiple Answers).

В нужные окошки конструктора вписываем вопрос и варианты ответов на него (если они есть).

Дополнительные настройки самые разнообразные: кроме перевода надписей можно давать отвечающим обратную связь, показывать картинки и просить подтвердить выбранные ответы. Всего не перечислить! Но самые основные настройки - вот:

А как насчёт того, чтобы дать зрителю полную свободу творчества? Для этого есть кнопка "Free Text Question". С её помощью можно задать зрителям какой-нибудь проблемный вопрос для размышления.

Уф, с заданиями и вопросами покончили! Самое время создать меню видеозаписи для более удобного просмотра. И сначала сделаем несколько закладок. Проигрываем видео до необходимого момента, ставим на “паузу” и нажимаем на значок “флажок” внизу под видео слева. Далее нажимаем “Add bookmark”.

В открывшееся поле вписываем название закладки.

Из закладок автоматически формируется меню, которое может быть показано в начале видео и служит для более удобного перемещения по видеозаписи.

Итоговое задание

Вполне можно обойтись и без него. Но если вдруг захочется использовать, то искать его надо во вкладке “Summary Task”. Это задание-утверждение. Записываем инструкцию для отвечающих, например: “Выбери правильное утверждение”. Далее заполняем графы с верным и неверным утверждением (первое утверждение - верное, следующие - неверные). Для добавления вариантов нажимаем “Add statement”. В разделе “Tip” можно добавить подсказку отвечающему. Также устанавливаем время для показа итогового задания (по умолчанию - 3 секунды до конца видео).

К итоговому заданию можно прикрепить обратную связь.

Сохраняем и публикуем

Как только работа над видео будет закончена, нажимаем “Save”. Ссылку на готовый видеоролик можно взять вверху из строки браузера в режиме просмотра (View). Для того, чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Embed” (не забудьте указать в открывшемся окошке размеры в пикселях, чтобы видеоролик вписался в блог).

А это парочка примеров интерактивного видеотворчества из Совиного мастер-класса "Интерактивное видео своими руками":