Skip to content

Instantly share code, notes, and snippets.

@solon
Created January 24, 2013 16:01
Show Gist options
  • Save solon/4623816 to your computer and use it in GitHub Desktop.
Save solon/4623816 to your computer and use it in GitHub Desktop.
Example HTML5 video tag that works (with SublimePlayer) on the widest range of devices including Android 2.2. Note media queries and absence of 'type' attributes on source elements. Android 2.2 won't play the video without these considerations.
<video width="1280" height="720" style="width:100%; height:auto;" id="videoPlayer"
poster="http://livelygroup-companies.s3.amazonaws.com/sites/505c81c854558f2db8000004/content_entry50609d9954558f7ad8000057/50ad003dd8bf7000020000e5/files/lg_pullout_carousel.jpg" preload="none" data-autoresize="fit" data-uid="lg-pullout-generic" data-name="Pullout">
<source media="screen and (min-device-width: 768px)" data-quality="hd" src="http://livelygroup-companies.s3.amazonaws.com/sites/505c81c854558f2db8000004/content_entry50609bf754558f7ad800003b/50acfc92d8bf7000020000ac/files/lg_pullout_generic_16x9_high.mp4">
<source media="screen and (max-device-width: 767px)" data-quality="base" src="http://livelygroup-companies.s3.amazonaws.com/sites/505c81c854558f2db8000004/content_entry50609bf754558f7ad800003b/50acfc92d8bf7000020000ac/files/lg_pullout_generic_16x9_baseline.mp4">
<source src="http://livelygroup-companies.s3.amazonaws.com/sites/505c81c854558f2db8000004/content_entry50609bf754558f7ad800003b/50acfc92d8bf7000020000ac/files/lg_pullout_generic_16x9.webm">
<source src="http://livelygroup-companies.s3.amazonaws.com/sites/505c81c854558f2db8000004/content_entry50609bf754558f7ad800003b/50acfc92d8bf7000020000ac/files/lg_pullout_generic_16x9.ogv">
</video>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment