Різноманітність вмісту інтерактивної книги в ресурсі h5p.org


За матеріалами сайту Н5Р.org. Додаткові матеріали у вільному доступі Інтернета.

Інтерактивний відеоурок

Тип інтерактивного відеовмісту дозволяє додавати взаємодії поверх відеокліпів. Такі елементи взаємодії, як зображення, докладний текст, посилання та тести, з’являються під час перегляду відео учнем.

У цьому посібнику ви дізнаєтесь:

  • Коли використовувати інтерактивні відео
  • Як створити інтерактивне відео

Відеоурок на сторінці за посиланням тут

У відео показано, як можна використовувати інтерактивне відео та як ним користуватися.

Приклад інтерактивного відео


Коли використовувати інтерактивні відео

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

Ви можете полегшити диференційоване навчання, додавши поглиблену інформацію, таку як зображення, таблиці, текст і посилання, з якими учень може взаємодіяти під час відтворення відео.

Додайте головоломки, які учні повинні розв’язувати у будь-який час у відео, додавши запитання з кількома варіантами відповіді , заповніть пропуски , перетягніть запитання та підсумки .

Крок 1: Тема

Ми використаємо дуже коротке відео про червону смородину як основу для цього уроку.

кущ червоної смородини від Філа Фріда на Vimeo .

Відео вище ліцензовано за ліцензією Creative Commons Attribution ShareAlike . (Відео у форматі MP4 та WebM (клацніть посилання та правою кнопкою миші на відео на новій сторінці, а потім виберіть «зберегти відео як».)

Крок 2: Відеофайли

Відеокліп є наріжним каменем будь-якого інтерактивного відео.

Відеоформат .mp4 працюватиме в більшості браузерів. Однак вам слід надати альтернативне відео у форматі webm, щоб бути впевненим.

Браузери Opera, наприклад, взагалі не підтримують формат .mp4. Перевірити, які браузери підтримують формат відео .mp4, можна тут .

Щоб конвертувати відео mp4 у формат WebM, ви можете скористатися конвертером із відкритим вихідним кодом, таким як Miro .

Крок 3: Створення інтерактивного відео

Виберіть опцію «Новий вміст» і виберіть «Інтерактивне відео» зі списку типів вмісту:

Крок 4: Інтерактивний відеоредактор

Тепер має з’явитися інтерактивний редактор відео. Верхня частина редактора виглядає так:

У цьому підручнику ми зосередимося на створенні інтерактивних елементів у відео. Тому ми зосередимося на верхній частині редактора, над заголовком Загальні поля .

Тип інтерактивного відеовмісту складається з трьох вкладок: Завантажити відео , Додати взаємодії та Підсумкове завдання . Ці три кроки являють собою природний робочий процес для створення інтерактивного відео. За умовчанням вкладка «Завантажити відео» відображається, коли ви створюєте нове інтерактивне відео, і це те, з чого ви завжди хочете починати.

Крок 5. Завантажте відео

Тут ми додаємо відеокліпи, на яких базується наше інтерактивне відео.

Натисніть кнопку «+», а потім кнопку «Завантажити відеофайл»:

Перегляньте місце, куди ви завантажили відеофайл mp4 із кроку 1, і завантажте відео. З’явиться квадратний чорний значок із записом mp4:

Натисніть кнопку плюса ще раз, щоб додати альтернативний відеоформат, щоб забезпечити підтримку в усіх браузерах. Знайдіть і завантажте відеокліп у форматі WebM, який ви конвертували з mp4 на кроці 2:

Додайте відповідні мітки для обох рівнів якості. Тепер відредагуйте інформацію про авторські права, натиснувши кнопку Редагувати авторські права під чорними значками відеокліпу:

Оскільки ми використовуємо відеокліп із ліцензією Creative Commons, ми додаємо інформацію нижче в діалогове вікно «Редагувати авторські права» .

Назва: -> Ягоди
Автор: Fred Rune Rahm
Джерело: https://vimeo.com/15132262 Ліцензія: Attribution-ShareAlike Версія ліцензії: 3.0 Unported

Тепер, коли ми додали наші відеофайли та інформацію про авторські права, ми готові додавати взаємодії.

Крок 6. Додайте взаємодії

Натисніть вкладку «Додати взаємодії» у верхній частині редактора. Попередньо переглядається відеокліп, який ми додали на попередньому кроці:

Ми використовуємо панель інструментів над відеокліпом, щоб додати взаємодії:

Існує три різні типи взаємодії:

  • Взаємодія вікторини (запитання), представлена ​​синьою кнопкою
  • Прості взаємодії (текст, зображення, таблиця), представлені у вигляді фіолетової кнопки та
  • Адаптивність (Перейти до) взаємодії

У цьому підручнику ми додамо взаємодію тексту та зображення .

Крок 7: Взаємодія з текстом

Ми додамо короткий текст про червону смородину, який учень зможе прочитати.

Спочатку додайте текстову взаємодію, натиснувши кнопку «Текст» на панелі інструментів, а потім перетягніть її поверх відео та опустіть у середину відео. Коли ви припините взаємодію, з’явиться діалогове вікно.

Ми хочемо, щоб текстова взаємодія була видимою в перші три секунди відео. Введіть 0:00 як час початку та 0:03 як час завершення в полі Відображення часу . У цьому випадку ми не хочемо, щоб відео зупинялося автоматично, коли з’являється взаємодія, тому ми залишимо прапорець « Призупинити» непозначеним.

Мітка – це текст, який відображатиметься поруч зі значком взаємодії як короткий опис того, що учень може очікувати знайти під час взаємодії. Введіть Redcurrants у поле мітки.

У полі «Текст» ми додамо фактичний текст із детальною інформацією про червону смородину, перефразований із Вікісловника :

Червона смородина — яскраво-червоні напівпрозорі їстівні ягоди чагарнику Ribes rubrum, батьківщиною якого є Західна Європа.

Натисніть Готово . Тепер ви побачите, що до відео додано значок із міткою Redcurrants :

На часову шкалу під відео також додано білу крапку, яка вказує на те, що на цьому етапі відео доступна взаємодія:

Відтворіть відео, щоб переконатися, що взаємодія видно в правильний час.

Двічі натисніть піктограми взаємодії, щоб редагувати інтерактивні елементи.

Крок 8: Взаємодія зображення

Ми додамо дві взаємодії із зображеннями, що показують інші види смородини, які учень може переглянути, натиснувши на піктограми зображень.

Нижче наведено посилання на зображення, знайдені на Wikimedia Commons, які ми використовуватимемо:

Ви можете додати взаємодію із зображенням так само, як ми додали взаємодію з текстом. Натисніть кнопку «Зображення» , перетягніть його на відео та опустіть туди, де ми хочемо його розмістити.

У першій взаємодії Image ми додаємо зображення чорної смородини. У полі Відображення часу вставте 0:03 - 0:03. Цього разу ми поставимо прапорець «Пауза» , щоб відео призупинялося, коли з’являється взаємодія. Додайте позначку Чорна смородина . Крім того, використовуйте чорну смородину для полів Альтернативний текст і Текст при наведенні . Натисніть Готово .

Не забудьте додати відповідну інформацію про ліцензію, коли використовуєте мультимедіа, права на які вам не належать.

Нарешті, додайте зображення білої смородини та використовуйте ті самі параметри, що й для взаємодії із зображенням чорної смородини , показано вище. Натисніть Готово , коли ви додасте взаємодію із зображенням білої смородини. Ви можете переміщувати взаємодії за допомогою перетягування. Розташуйте їх так, щоб вийшло щось подібне до цього:

Ви також можете додати запитання з вибором кількох варіантів , заповнити пропуски , перетягнути запитання та підсумки в інтерактивних відео. Ви додаєте та розміщуєте їх так само, як і взаємодії тексту та зображення . Прочитайте окремі навчальні посібники для цих типів вмісту, щоб дізнатися більше про їх створення.

Крок 9: Підсумок

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

Ми додамо дві групи тверджень у Підсумок . Щоб отримати докладний опис того, як створити резюме , ви можете прочитати цей підручник .

У першу групу операторів додайте такі оператори:

Батьківщиною червоної смородини є Західна Європа.

Батьківщиною червоної смородини є Північна Африка.

Батьківщиною червоної смородини є Південна Азія.

Перше твердження правильне. Тепер у вас має бути щось на зразок цього:

Щоб створити ще одну групу заяв , натисніть кнопку Додати заяви . У другій групі операторів додайте такі оператори:

Інші сорти смородини включають чорну та білу смородину.

Інші сорти смородини включають синю і жовту смородину.

Інші види смородини включають зелену смородину та апельсинову смородину.

Перше твердження є правильним і тут.

Крок 10: Закладки

Хоча приклад відео, який ми тут використовуємо, дуже короткий, ми додамо кілька закладок. Закладки використовуються для позначення нової теми, важливої ​​взаємодії або події у відео.

Поверніться до кроку Додати взаємодії , натиснувши цю вкладку у верхній частині редактора.

Закладки відображаються в меню закладок, яке відкривається натисканням кнопки Закладка поруч із кнопкою Відтворення :

Ви додаєте закладку, пересуваючи головку відтворення до потрібного місця відео та натискаючи кнопку «Закладка» .

Ми додамо закладку для кожної взаємодії у відео.

Перемістіть головку відтворення на 0:00 і натисніть кнопку закладки .

У меню натисніть Додати закладку :

Додайте мітку Redcurrants до закладки та натисніть Enter на клавіатурі.

Перемістіть головку відтворення на 0:03, додайте закладку та позначте її Інша смородина . Нарешті, перемістіть головку відтворення на 0:04 і додайте закладку під назвою «Підсумок» .

Кожна закладка позначена вертикальною сірою лінією на панелі пошуку . Учні можуть переходити безпосередньо до розділу, натискаючи закладки в меню закладок.

Тепер у вас має бути щось на зразок цього:

Ви можете редагувати мітку закладки, перемістивши курсор відтворення так, щоб відобразилася закладка, яку ви бажаєте редагувати, помістіть курсор у текст закладки та відредагуйте безпосередньо текст. Щоб видалити закладку, натисніть кнопку праворуч від мітки закладки.

Крок 11: Кінцевий екран

До інтерактивного відео із вбудованими запитаннями буде додано кінцевий екран. Кінцевий екран містить підсумок усіх запитань, на які було отримано відповіді, а також оцінку, отриману за кожне запитання. Користувач може повертатися до запитань без відповіді, відповідати на них, і кінцевий екран відповідно оновлюється.

Кінцевий екран відкриється автоматично в кінці відео. До нього також можна отримати доступ у будь-який час під час відео, натиснувши піктограму зірочки, розташовану праворуч від панелі виконання відео.

Коли користувач відповість на одне із вбудованих запитань, він може надіслати свої відповіді. Якщо надсилання проходить успішно, для користувача створюється звіт і на кінцевому екрані відображається сповіщення.

Крок 12: Завершення

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

У цьому посібнику ми лише коснулися поверхні того, що можливо з інтерактивними відео. Якщо у вас виникли запитання або ви вважаєте, що в посібнику чогось не вистачає, не соромтеся залишати коментарі та пропозиції.

Додатки: