Автозапуск видео HTML5 запускается не всегда

#javascript #html #video #autoplay

#javascript #HTML #Видео #автозапуск

Вопрос:

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

 const video = document.createElement('video')
video.src = 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv'
// video.muted = true
video.loop = true
video.autoplay = true

video.addEventListener('canplay', () => {console.log('can')})
video.addEventListener('play',() => {
  console.log('playing')
  // setTimeout(() => {console.log(video.currentTime)}, 5000)
}, true)

https://codepen.io/drafting-dreams/pen/MWyxwRX

1. Первая проблема, которую я вижу, заключается в том, что ваше видео не добавляется на вашу страницу

2. Необходимо ли добавлять видеоэлемент на мою страницу? То, что я пытаюсь сделать, это автоматически воспроизвести это видео и нарисовать его кадр за кадром на холсте. Поэтому я действительно не хочу показывать это на своей странице.

Ответ №1:

Это потому, что вы прокомментировали video.muted = true . Видео со звуком может автоматически воспроизводиться только при определенных условиях (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes )

1. Вы также добавили свое видео? Например, в codepen в конце кода js добавьте document.body.append(video);

2. Необходимо ли добавлять видеоэлемент на мою страницу? То, что я пытаюсь сделать, это автоматически воспроизвести это видео и нарисовать его кадр за кадром на холсте. Поэтому я действительно не хочу показывать это на своей странице.

Ответ №2:

Добавление этой строки кода, похоже, устраняет проблему:

 video.setAttribute('crossorigin', 'anonymous')

Я также нашел эту статью в MDN (Mozilla), в ней разъясняется использование crossorigin атрибута для элемента изображения, но она дает полезную информацию для элемента видео.

1. Это правда, что Canvas не любит рисовать данные, которые поступают из другого домена (создает проблему безопасности CORS). Вам все равно нужно отключить звук видео для autoplay работы.

Ответ №3:

Я думаю, вам следует добавить:

 video.load();