Перейти к основному содержимому

Воспроизведение аудиозаписи или видеоролика во время интервью

· 2 мин. чтения

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

Встраивание файла​

Если у вас есть медиафайл, то для начала выложите его куда-нибудь, чтобы он был доступен по прямой ссылке по протоколу HTTPS, например на хостинг вашего сайта.

примечание

Яндекс.Диск, Dropbox и другие подобные сервисы не подходят.

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

Примеры:

<audio src="https://example.com/audio.mp3" controls=""></audio>
<video src="https://example.com/video.mp4" controls="" style="max-width: 100%; margin-left: auto; margin-right: auto"></video>
примечание

Посмотреть примеры вопросов с аудиозаписью и видеороликом можно здесь.

Встраивание видеоролика с YouTube​

В анкету можно добавить видео с YouTube. Для этого сначала вставьте в вопрос, где хотите показать ролик, скрипт во время показа:

var ytCode = '<iframe…'; // между апострофами должен быть код с YouTube

document.querySelector('div.question-text').insertAdjacentHTML(
  'beforeend',
  ytCode
);

Затем:

  1. Откройте ваше видео на сайте YouTube с компьютера.
  2. Нажмите Поделиться.
  3. Выберите Встроить.
  4. Скопируйте код.
  5. Вставьте код в переменную ytCode скрипта.
Пример скрипта с добавленным кодом видео
var ytCode = '<iframe width="560" height="315" src="https://www.youtube.com/embed/FzuZUE4sxmk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display: block; margin: 0 auto;"></iframe>';

document.querySelector('div.question-text').insertAdjacentHTML(
  'beforeend',
  ytCode
);