HTML5 тег видео в vue. js - PullRequest
Новая
       70

HTML5 тег видео в vue. js

0 голосов
/ 08 мая 2020

У меня самая странная проблема в настройке vue.

Эта разметка отлично работает для одной страницы - на всех устройствах и во всех протестированных браузерах: 

<video 
    width="960px" 
    height="540px" 
    controls autoplay muted loop preload="auto" 
    playsinline
    >
    <source src="@/assets/video/studio_sor_v1.mp4" type="video/mp4">
    Your browser does not support the video tag. 
</video>

Но эта разметка работает только для настольных компьютеров и Android для мобильных. И Chrome, и Safari не могут воспроизвести его на iOS мобильных устройствах: 

<video 
    width="960px" 
    height="540px" 
    controls autoplay muted loop preload="auto" 
    playsinline
    >
    <source src="@/assets/video/studio_nord_high_sml.mp4" type="video/mp4">            
    Your browser does not support the video tag.
</video>

Разные видео, но закодированные с помощью одного кодировщика, одинаковые настройки, одинаковый размер файла и т.д. c.

Какой-то чувак пытался загрузить неиграющий файл на свой сайт (какой-то сайт Vix) - и он там работает. Vue. js или проблема с сервером (netlify)?

Для меня это не имеет смысла. Есть идеи?

1 Ответ

0 голосов
/ 11 мая 2020

Держу пари, это проблема с кодом c. какой код c не воспроизводимого видео? Первый, вероятно, h264 (почти универсальная поддержка). Я предполагаю, что второй - это VP8 или VP9 в контейнере mp4. iOS мобильные устройства (независимо от браузера) не поддерживают эти кодеки.

Вы можете проверить это с помощью FFprobe Вот API для ffprobe: https://www.streamclarity.com/probe?url= {videoURL}

...