background preloader

Intégration HTML5

Facebook Twitter

Introduction à la balise video de HTML5. L'élément <video>, cousin de <audio> offre en HTML5 une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page web.

Introduction à la balise video de HTML5

Elle permet également de proposer une alternative à l'utilisation de Flash pour les plate-formes ne le supportant pas (iOS par exemple avec iPhone, iPod, iPad…) Balise Syntaxe générale La syntaxe de base de la balise video est extrêmement simple : <video controls src="video.ogv">Ici la description alternative</video> L'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Sources multiples On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type : <video width="400" height="222" controls="controls"><source src="video.mp4" type="video/mp4" /><source src="video.webm" type="video/webm" /><source src="video.ogv" type="video/ogg" /> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.

HTML5 Video. HTML video Tag. HTML5 Video. Introduction In modern browsers, adding a video to your page is as easy as adding an image.

HTML5 Video

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. 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.

10 Guidelines for Better Website Background Videos

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? Easy, just follow these 10 guidelines. GitHub - BGStock/jquery-background-video: Easily improve your HTML5 background videos with a single line of jQuery. Video.js: The Player Framework. Video.js Default Skin. Download jPlayer : HTML5 Audio & Video for jQuery.

Help us improve jPlayer Developing and supporting jPlayer is almost a full-time job.

Download jPlayer : HTML5 Audio & Video for jQuery

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. The World's Most Popular Video Player.