Solved

Responsive HTML5 video

Posted on 2016-09-07
1
49 Views
Last Modified: 2016-09-08
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
Comment
Question by:mingchih
1 Comment
 
LVL 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 41789519
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question