Mobile detection for specific parts of websites

Question

I am beginner in web development and I'm having trouble wrapping my head around this problem.

I have taken a video and encoded it into an mp4 file and an ism file. I have two different video tags- one that will play each file. For the website I'm working on I would like it to use one of the video tags if the website is being viewed on a mobile device, and the other if it is not. Right now the website is in HTML5. Thank you for any help you can give!

Answer 1

The video tag already supports alternate sources. The article here describes how to include multiple sources for a video (because some browsers don't work with certain codecs). Like so:

<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>

For mobile checks you can use JavaScript CSS media queries:

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

See this article

Answer 2

you could either use UserAgent based detection to decide what to show (not recommended as you have to maintain it) or canPlayType() with the codec you are using to see if the browser supports it (better option)