Chrome v.66 автозапуск в мобильном браузере - PullRequest
Новая
       51

Chrome v.66 автозапуск в мобильном браузере

0 голосов
/ 03 мая 2018

Я пытаюсь создать функцию, в которой отображается изображение со значком воспроизведения, и когда пользователь нажимает на значок, мы загружаем видео во фрейме во всплывающем окне. Согласно этой ссылке , iframe следует разрешить автозапуску, если пользователь взаимодействовал с сайтом с помощью атрибута allow = 'autoplay'. Но, похоже, это не работает в нашем случае на мобильном браузере Chrome v.66 . Так как мы загружаем видео только после того, как пользователь нажимает на игру, я полагаю, это должен быть законный случай взаимодействия с пользователем. Есть что-то, что я упускаю?

1 Ответ

0 голосов
/ 03 мая 2018

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

К моменту загрузки iframe срок действия вашего пользовательского жеста истечет, и вы не сможете ни автоматически воспроизводить, ни программно воспроизводить <video> со звуком.

Хотя, , если ваш документ iframe находится в том же домене , это загрузить другой элемент <video> из основного документа, внутри события пользовательского жеста, чтобы пометить его как пользователя одобрен (вызывая MediaElement.play () ) и после загрузки вашего iframe заменить элемент iframe на этот одобренный пользователем в документе iframe. 

btn.onclick = e => { // we must have an user-gesture event
  const iframe = document.createElement('iframe'); // your iframe
  const frameContent = `<html>
    <body>
      <video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"></video>
    </body>
  </html>`;
  const url = URL.createObjectURL(new Blob([frameContent], {type: "text/html"}));
  // Our user-approved <video>
  const vid = document.createElement('video');
  vid.play().catch(e => null); // mark it as 'user-approved'
  vid.autoplay = true;

  iframe.onload = e => { // once our iframe have loaded
   // swap both elements
   const i_vid =  iframe.contentDocument.querySelector('video');
   i_vid.replaceWith(vid);
   vid.src = i_vid.currentSrc;
  };
  iframe.src = url;
  document.body.append(iframe);
};

защищенные iframes StackSnippet сверх- не позволят нам манипулировать этим внутренним фреймом, так что вот live jsfiddle .

...