Мой HTML5 видеоплеер не работает при установке PWA в iOS - PullRequest
Новая
       54

Мой HTML5 видеоплеер не работает при установке PWA в iOS

1 голос
/ 21 марта 2020

Здравствуйте, я сделал PWA, который воспроизводит случайные видео. Он отлично работает в Android или P C и почти идеально в Safari, но когда я устанавливаю приложение в iOS, мой HTML5 видеоплеер не загружает видео. Он работал 2 дня go и с тех пор ничего не изменилось, но сегодня это не работает. Кроме того, потому что у меня нет устройств MacOS для запуска симулятора, поэтому я не могу его отладить. У меня есть исходный код, открытый в GitHub, вы хоть представляете, что это такое?

Я также даю источник видео с JS, если это как-то связано с ним. 

document.getElementById("vsrc").src = srcRaw + videoid + ".mp4";
document.getElementById("videoEl").load();

Код GitHub: https://github.com/ondersumer07/vinematik

Сам сайт: https://ondersumer07.github.io/vinematik/

1 Ответ

1 голос
/ 21 марта 2020

После долгих исследований я понял это. Что вам нужно сделать, это добавить атрибут crossorigin к элементу HTML5 video. Но это должно быть только в iOS, иначе он сломает ваш видеоплеер на Android или в Интернете.

Для этого вам нужно использовать бит javascript: 

// Detect iOS and if it is, add the crossorigin to the video player so that it is working as expected
  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
    document.getElementById("videoEl").setAttribute("crossorigin", "true");
};

Этот фрагмент кода добавит атрибут crossorigin к элементу video только в iOS. И когда вы используете этот код, он также работает в PWA.

Вот как я решил свою проблему.

...