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

  1. Информация о сервисе

Проект Н5Р (https://h5p.org/) предназначен для создания разнообразного интерактивного контента: презентаций, видео и игр. Пользователи могут создавать интерактивный контент на сервисах проекта и затем использовать его на страницах сайтов или блогов. Проект не требует оплаты за использование. Поддерживает кириллицу.

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

  1. Возможность организации групповой работы в сервисе

Учитель может организовать опрос учащихся по теме, разместив видео у себя на сайте или в блоге.

  1. Возможности сервиса для образовательной деятельности

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

  1. Где можно делиться материалами с сервиса

 Видеоурок можно встроить на страницу сайта или блога (пример размещения в блоге -) и поделиться им в социальных сетях (Twitter, Facebook).

  1. Алгоритм работы в сервисе

Регистрация

Загрузка видео. Дополнительные настройки

Добавление надписи

Добавление текста

Добавление таблицы

Добавление гиперссылки

Добавление изображения

Добавление вопроса с несколькими верными вариантами ответа

Добавления задания с заполнением пропусков

Добавление “горячей точки”

Добавление закладок. Создание меню

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

Сохранение и распространение

Регистрация

Для работы в сервисе необходима регистрация. Для этого заходим на сайт https://h5p.org/ и нажимаем “Create free account”. В дальнейшем можно заходить на сервис, используя клавишу “Log in”.

1.jpg

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

2.jpg

По желанию можно рассказать о себе в разделе “Description”, подписаться на новости проекта или отказаться от них (снять “галочку”), в заключение пройти проверку, ответив на контрольный вопрос (так называемая “капча”) и в соответствующее окно записав ответ на него в виде слова. Контрольный вопрос и ответ - на английском языке. Для перевода можно использовать переводчик Google.

3.jpg

Открывается учетная запись. Чтобы приступить к созданию интерактивного видео, нажимаем “Create New Content”.

4.jpg

Загрузка видео. Дополнительные настройки

Даем название будущему видеоролику. Из выпадающего списка выбираем “Interactive video”. Выбираем необходимые настройки.

5.jpg

Для загрузки видео нажимаем на значок “+”.

6.jpg

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

7.jpg

При необходимости можно добавить информацию о копирайте (Edit copyright), указав название видео. его автора, источник видео, вид лицензии. В разделе “Advanced settings: Interactive Video” еще раз указываем название видео (обязательно) и информацию по авторскому праву (копирайт).

8.jpg

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

9.jpg

В разделе “Behavioural settings” устанавливаем настройки показа видео:

В разделе “Settings and texts” корректируем текстовые надписи, которые будут появляться на экране во время просмотра видео. Можно перевести предложенные надписи на русский язык:

11.jpg

В подразделе “Localize: Interaction” также можно заменить английские надписи на русские:

12.jpg

В разделе “Summary feedback” устанавливается обратная связь: результаты, которые будут показывать отвечающему по окончании работы с видео: можно заменить англоязычные надписи на русские или придумать свой текст обращений к учащимся.

13.jpg

Когда все настройки будут завершены, нажимаем “Save”.

14.jpg

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

В центре - видео для редактирования. Вверху - панель инструментов для добавления интерактивных элементов:

  1. Надпись
  2. Текст
  3. Таблица
  4. Ссылка
  5. Изображение

15.jpg

  1. Задание-утверждение
  2. Закрытый вопрос (с одним правильным ответом)
  3. Вопрос с несколькими правильными ответами.
  4. Заполнение пропусков.
  5. Выделение слова.
  6. Перенесение слов.
  7. Вопрос-ветвление.
  8. “Горячая” точка.

39.jpg

Все интерактивные элементы добавляются “перетягиванием” их на экран “мышью” в нужный момент видео.

Добавление надписи

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

17.jpg

Добавление текста

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

18.jpg

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

19.jpg

Добавление таблицы

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

20.jpg

Добавление гиперссылки

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

21.jpg

Добавление изображения

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

22.jpg

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

23.jpg

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

Добавление задания-утверждения

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

40.jpg

Далее заполняем графы с верным и неверным утверждением (первое утверждение - верное, следующие - неверные). Для добавления вариантов нажимаем “Add statement”. В разделе “Tip” можно добавить подсказку отвечающему.

25.jpg

В разделе “Adaptivity” указываем порядок действий при правильном и неправильном ответах (необязательно):

Можно также выбрать название для кнопки перехода к определенному моменту видео. закончив настройки, нажимаем “Done”.

К одному моменту видео можно добавить несколько заданий-утверждений.

26.jpg


Добавление вопроса с одним правильным ответом

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

27.jpg


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

28.jpg

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

29.jpg

В разделе “Adaptivity” указываем порядок действий при правильном и неправильном ответах (необязательно):
- перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);
- разрешить пропустить вопрос и продолжить;
- показать текстовое сообщение.
Можно также выбрать название для кнопки перехода к определенному моменту видео. Закончив настройки, нажимаем “Done”.

26.jpg

Добавление вопроса с несколькими верными вариантами ответа

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

30.jpg

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

31.jpg

32.jpg

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

33.jpg

В разделе “Adaptivity” указываем порядок действий при правильном и неправильном ответах (необязательно):
- перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);
- разрешить пропустить вопрос и продолжить;
- показать текстовое сообщение.
Можно также выбрать название для кнопки перехода к определенному моменту видео. закончив настройки, нажимаем “Done”.

26.jpg

Добавления задания с заполнением пропусков

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

34.jpg

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

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

35.jpg


В разделе “Behavioural settings” доступно несколько дополнительных настроек:
- включить кнопки “Показать решение” и “Попробовать ещё раз”;
- автоматическая проверка ответа;
- убеждаться, что слово написано точно так же, как и в ответе;
- требовать заполнить все поля перед показом ответа;

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

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


36.jpg

В разделе “Adaptivity” указываем порядок действий при правильном и неправильном ответах (необязательно):
- перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);
- разрешить пропустить вопрос и продолжить;
- показать текстовое сообщение.
Можно также выбрать название для кнопки перехода к определенному моменту видео. закончив настройки, нажимаем “Done”.


26.jpg

Добавление задания с выделением слов

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

37.jpg

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

В разделе “Behavioural settings” можно включить кнопки “Показать решение” и “Попробовать ещё раз”.

41.jpg

В разделе “Adaptivity” указываем порядок действий при правильном и неправильном ответах (необязательно):
- перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);
- разрешить пропустить вопрос и продолжить;
- показать текстовое сообщение.
Можно также выбрать название для кнопки перехода к определенному моменту видео. Закончив настройки, нажимаем “Done”.

26.jpg

Добавление вопроса-ветвления

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

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

44.jpg

Добавление “горячей точки”

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

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

42.jpg

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

43.jpg

Добавление закладок. Создание меню

Чтобы добавить закладку, проигрываем видео до необходимого момента, ставим на “паузу” и нажимаем на значок “флажок” внизу под видео слева. Далее нажимаем “Add bookmark”.

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

46.jpg

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

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

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

47.jpg

Сохранение и распространение

Как только работа над видео будет закончена, нажимаем “Save”.

 

49.jpg

Во вкладке “View” видео доступно для предварительного просмотра. Для того, чтобы получить код для встраивания видео на страницу сайта или блога, нажимаем “Embed”. Чтобы скачать видео, нажимаем “Download”. Также видеороликом можно поделиться в социальных сетях (Twitter, Facebook).

48.jpg