background preloader

HTML5 Video

HTML5 Video
Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element. The Markup Let's jump in with a really simple example: That's all you need to embed a simple video on your page and show the basic controls so that a user can play, pause or otherwise control the video. Specifying Sources You can specify multiple source files by using the <source> element. When the browser parses the <source> tag, it uses the optional type attribute to help decide which file to download and play. It's also a good idea to make sure that your videos are being served with the right MIME type. Media Fragments Adding a media fragment to the media URL, you can specify the exact portion you want to play. You can also specify the times in hours:minutes:seconds, such as #t=00:01:05 to start the video at one minute, five seconds in. Providing captions and subtitles Attributes Styling Related:  Intégration HTML5

Quick Guide to Implementing the HTML5 Audio Tag Step 1: Wrap your Flash object with the audio tag Those browsers that don't recognize the audio tag will load the Flash content instead. Step 2: Add the source reference We can add as many "source" lines and formats as we want. If the browser doesn't support one specific format it will fallback to the next one and so forth. Step 3: Add fallback to Flash To be safe, we need to add the fallback to a Flash audio player, in case the browser doesn't support any of the formats we specified. Note: There are also tools and online converters you can use if you want to create ogg files from your mp3 and add support for ogg too. To make it easier, we are using the SWFObject library to insert the Flash player via JavaScript. <script src=" "2.2");</script> Step 4: Add the default controls to show the player These controls are not customizable (see examples at the end). Examples You are all set!

10 Guidelines for Better Website Background Videos In the last few years, we've started to see more and more websites using background videos as a design feature. This trend will only increase as internet connections get faster, video codecs get better, and browsers gain better support for HTML5 video. If done poorly, a background video can have negative consequences such as slowing down the rest of the page, distracting the user from the actual page content, even making your users feel sick or uneasy if there's too much panning or movement. However, when done well, though, a background video can be a great, subtle design touch that adds that extra layer of thoughtfulness. So how do we avoid the mistakes, and do all the right things? Compress the video as much as you can There's nothing worse than visiting a website and having the background video stopping and starting as it tries to buffer all the way through. To avoid this, we really need to compress the video down to the lowest bitrate that we think looks acceptable. Account for devices

Introduction to CSS3 Animations <title>Introduction to CSS3 Animations</title> pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; clear:both; ul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; cursor: pointer; ul.css3demo1 li { -webkit-transition: all 0.3s linear; ul.css3demo1 li:hover { -webkit-transform: rotate3d(0, 0, 0, 25deg); -webkit-transform-style: preserve-3d; ul.css3demo2 li { ul.css3demo2 li:hover { -webkit-transform: translate3d(0, 40px, 0); ul.css3demo3 li { ul.css3demo3 li:hover { -webkit-transform: scale(.5); ul.css3demo4 li { ul.css3demo4 li:hover { -webkit-transform: scale(1.5); ul.css3demo5 li { ul.css3demo5 li:hover { -webkit-transform: translate3d(10px, 0, 0); ul.css3demo6 li { ul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); ul.css3demo7 li { ul.css3demo7 li:hover { background: #0cf; ul.css3demo8 li { ul.css3demo9 li {

GitHub - BGStock/jquery-background-video: Easily improve your HTML5 background videos with a single line of jQuery HTML5 Canvas Cheat Sheet There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better. The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla's examples). So, it's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context. Choose between a 2 page PDF document or a PNG file. Corrections and comments are welcome!

HTML video Tag Touch The Future: Create An Elegant Website With HTML 5 And CSS3 I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process. There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website. In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. How HTML 5 And CSS3 Can Change Web Design Quick Overview On HTML 5 Sketch Your Ideas <!

Download jPlayer : HTML5 Audio & Video for jQuery Help us improve jPlayer Developing and supporting jPlayer is almost a full-time job. Help us continue to help you. Please or buy a theme over at Thank you to all those that have contributed! Latest Release jPlayer is on GitHub jQuery Audio & Video player plugin Download the latest release from GitHub Clone or fork the jPlayer Repository on GitHub Install the jPlayer Node Packaged Module for node.js using npm install jplayer The jPlayer Composer Package at Packagist The jPlayer CDN at cdnjs.com online demos (The examples are in the GitHub repository.) developer guide release notes contributing For support, use the jPlayer Google Group Licensed under the MIT license. Development on GitHub Development of jPlayer is tracked on GitHub in the jPlayer Repository. jPlayer uses the version system of Major.Minor.Patch, where all versions are tagged and available on GitHub under releases. Release Archive The release archive is maintained in the jPlayer Repository on GitHub. jQuery Audio & Video player plugin

Related: