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

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

· 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>
примечание

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

Установка ограничений​

Скриптом во время показа можно заблокировать переход к следующему вопросу, если ролик не воспроизвёлся до конца, а также запретить его перемотку:

let media = document.querySelector('audio') || document.querySelector('video');
if (!media) return;

// Блокировка кнопки «Далее»
let button = document.getElementById('processingGoForwardBtn');
button.disabled = true;
button.title = `Для продолжения ${media.tagName == 'AUDIO' ? 'послушайте' : 'посмотрите'} ролик до конца`;

media.addEventListener('ended', () => {
    button.disabled = false;
    button.title = '';
});

// Запрет перемотки
let lastTime = 0;
media.addEventListener('timeupdate', () => {
    if (!media.seeking) lastTime = media.currentTime;
});

media.addEventListener('seeking', () => {
    if (media.currentTime > lastTime) {
        media.currentTime = lastTime;
    }
});

Встраивание видеоролика с 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
);