Mobile Detection For Specific Parts Of Websites

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 diffe

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

functionisMobile() {
    returnwindow.matchMedia( "(max-width: 320px)" );
}

See this article

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