Видео HTML 5 не отображается в Safari при рендеринге через DOMParser (рендеринг через innerHTML работает нормально) - PullRequest
Новая
       31

Видео HTML 5 не отображается в Safari при рендеринге через DOMParser (рендеринг через innerHTML работает нормально)

4 голосов
/ 04 октября 2019

(примечание: есть много вопросов о том, что видео не рендерит в Safari. Этот вопрос касается рендеринга видео с использованием DOMParser в Safari. Все отлично работает, если я использую innerHTML для рендеринга видео.)

У меня есть простейшее видео HTML 5, которое воспроизводится через DOMParser следующим образом:

codepen 

var htmlStr = `
<video xmlns="http://www.w3.org/1999/xhtml" controls="">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  Your browser does not support HTML5 video.
</video>
document.getElementById('test-vid').appendChild(doc.firstChild);
`;
var doc = new DOMParser().parseFromString(htmlStr, "text/xml");

Это прекрасно работает в Chrome, нов случае Safari видео не отображается. Я просто вижу белый экран. Однако, если я рендерим его через innerHTML, все работает нормально, и видео появляется.

Может кто-нибудь посоветовать, что не так с DOMParser в Safari. caniuse показывает полную поддержку Safari для DOMParser.

Протестировано на многих версиях safari, а именно Версия 12.1.1 (14607.2.6.1.1) и Версия 11.1 и т. Д.

1 Ответ

1 голос
/ 08 октября 2019

Только что протестировано, видео IS на экране и загружено (html инспектор, сетевой трафик и caplay событие, вызванное видео, загруженным в DOM, может подтвердить это).

Если вы попытаетесь переключить вкладку, а затем вернетесь к вкладке vid, видео будет отображаться , но без элементов управления, хотя я могу воспроизвести его, вызвав событие.

Похоже, проблема Safari , вероятно, связана с его политиками безопасности.

ВИДЕО https://recordit.co/mdZ4J89CL8

CODE PEN JS

var htmlStr = `
<video id="myvideo" xmlns="http://www.w3.org/1999/xhtml" controls="">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  Your browser does not support HTML5 video.
</video>`;

var doc = new DOMParser().parseFromString(htmlStr, "text/xml");

document.getElementById('test-vid').appendChild(doc.firstChild);

window.onclick = function(){
  document.getElementById('myvideo').play();
}

 document.getElementById('myvideo').addEventListener('canplay', function(){
   console.log('canplay');
 })

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

...