Get a site

Great collection of HTML5 Tutorials video code and demo

November 29th, 2011 by Villa Tommaso Leave a reply »
Share:
Share

How to Make Your Own Video Player On HTML5 Video

HTML5 video tutorial
This tutorial is going to cope with the task of creating your own video player on HTML5 Video. The video-element by itself already provides the necessary set of controls for playback controlling. In order you could see the playback control panel, it’s necessary to set the controls attribute.

Syncing Content With HTML5 Video

HTML5 video tutorial
One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic object element to a highly specified video and audio element, and with a rich API to access in pure JavaScript.

How to Build an HTML5 Video Player

HTML5 video tutorial
This tutorial on building an HTML5 video player is offered from Steve Heffernan’s Blog. This is a tutorial in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players. It’s library agnostic, meaning you don’t need a library like jQuery to create it, however once you understand how everything works it can definitely be simplified/improved on.

HTML5 Rocks Video

HTML5 video tutorial
The video tag is one of those HTML5 features that gets a lot of attention. Often presented as an alternative to flash in the media, the video tag actually goes beyond that. Although it’s recently joined the rest of the ubiquitous HTML tags, its capabilities and support across browsers have increased at an amazing speed. As you will see in this HTML5 Rocks tutorial its main advantage is the natural integration with the other layers of the web development stack such as CSS and JavaScript as well as the other HTML tags. This tutorial will give you a basic understanding of the video tag and also show various examples of different integrations with other HTML5 features, such as canvas.

Introduction to HTML5 video

HTML5 video tutorial
This article gives you an introduction to video tag and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.

Add HTML5 video to your site

HTML5 video tutorial
Embed native HTML5 video into your pages without plug-ins, and provide Flash-based fallback content for legacy browsers. Opera’s Vadim Makeev shows the way. Want to add video to your site? HTML5 enables us to do this as easily as placing images with an img element – and in this tutorial,.Net Magazine shows you how the magic is done.

Tutorial HTML5 Video

HTML5 video tutorial
This tutorial demonstrates how to use the HTML5 video tag to embed video in a web page without the use of a browser plug-in. It will also show how to use JavaScript to control the playback of the video. For this tutorial, you will need to have a browser that supports HTML5 video, as well as a video file to embed.

How to incorporate video with HTML5

HTML5 video tutorial
One of the more controversial additions to HTML5, the video element, offers a plug-in free alternative to proprietary formats. If you would like to use the new HTML5 video element in your markup, you’ll appreciate this excerpt from Christopher Schmitt’s CSS Cookbook, Third Edition.

Tutorial: Serving HTML5 Video Cross Browser (including iPad)

HTML5 video tutorial
This tutorial on building an HTML5 video player is offered from Rob Walsh, a designer from Chicago. This tutorial demonstrates how to make it working smoothly cross different browsers and iPad.

Building a custom HTML5 video player with CSS3 and jQuery

HTML5 video tutorial
IF we want to write a customised player for the HTML5 video element we need to handcode all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player! And this is where this article comes in. This is the first of a series in which we will look at building up an easily customizable HTML5 video player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.

Video for Everybody!

HTML5 video tutorial
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 video element, falling back to Flash automatically without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms.

Easy HTML5 Video

HTML5 video tutorial
HTML5 is the fastest growing web development trend and HTML5 video as a part of HTML5 becomes the new natural way to show video online. iPad, iPhone, Android, all new browsers declare the support for HTML5 video. It’s great, but what is the usual route to create HTML5 video? First you need to find converters and make three versions of your video – .OGG, MP4, WebM. Then, to provide the compatibility with IE and old browsers you add a fallback Flash version of your video with Flash video player. And finally, you extract an image for poster and write batch lines of code to combine all of it… Quite complicated?

In conclusion, i hope you find these tutorials very useful, if you have some more tutorials about HTML5 video to suggest, don’t hesitate to leave your comment!

Advertisement

3 comments

  1. toy robots says:

    hi!,I like your writing so a lot! proportion we keep up a correspondence more about your post on AOL? I require a specialist in this house to resolve my problem. May be that’s you! Looking forward to see you.

  2. Great job guys!!! Its cool to have custom video with html5 and css 3.

  3. And new HTML5 video players are coming too, look at this tweet i came across few days ago.

    http://spyrestudios.com/10-html-5-video-players/

Leave a Reply

*