• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 79
  • Last Modified:

Responsive HTML5 video

I am trying to use media queries in html to detect if the page is on phone or desktop than video will play different clip. However, It is not really working. I wonder how to fix it... the idea is from here https://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video

<video controls preload="none" loop muted autoplay poster='img/first_frame.png' class="fullscreen-bg__video" onclick="this.play(); ">
<source src="video/TankingTanksConversion04.mp4" type="video/mp4" media="all and (max-width:480px)">
<source src="video/TankingTanksConversion03.mp4" type="video/mp4">
</video>

Open in new window


Thanks
0
Brian Lin
Asked:
Brian Lin
1 Solution
 
lenamtlCommented:
You don't have to detect it, I should automatically display correctly based on device and browser. have more than one format will help.

Be aware that this may not play well on small device due to bandwidth restriction, specially for Auto play, plus some browser may not display the video at all.
Also don't forget to put a poster as image replacement for this case.

<video controls preload="none" poster="poster.png"> 
   <source src="video1.mp4" type="video/mp4"> 
   <source src="video1.webm" type="video/webm"> 
  <source src="video1.ogv" type="video/ogv"> 
</video> 

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now