Мобильное обнаружение для определенных частей сайтов

Question

Я начинаю заниматься веб-разработкой, и у меня возникают проблемы с обволакиванием этой проблемы.

Я взял видео и закодировал его в файл mp4 и файл ism. У меня есть два разных видео-тега - один, который будет воспроизводить каждый файл. Для веб-сайта, над которым я работаю, я бы хотел, чтобы он использовал один из видео тегов, если веб-сайт просматривается на мобильном устройстве, а другой - если нет. Сейчас сайт находится в HTML5. Спасибо за любую помощь, которую вы можете дать!

Answer 1

можно либо использовать обнаружение на основе UserAgent, чтобы решить, что показать (не рекомендуется, так как вы должны поддерживать его) или canPlayType() с кодеком, который вы используете, чтобы увидеть, если браузер поддерживает его (лучший вариант)

Answer 2

Видео-тег уже поддерживает альтернативные источники. В статье here описано, как включить несколько источников для видео (поскольку некоторые браузеры не работают с определенными кодеками). Как так:

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video> 

для мобильных проверок вы можете использовать JavaScript CSS медиазапросы:

function isMobile() { 
    return window.matchMedia("(max-width: 320px)"); 
} 

См this article