Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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