Theme of Video in HTML5
In this tutorial Theme of Video in HTML5 , we will see soon not all about videos in HTML5 but the most relevant and important of this new Video label.
HTML has made big changes on the web, that ordinary people might not notice but we work in this field we can not do great, best of these is the ability to include video and audio directly in code, for relying on the same HTML and not flash as we were doing (well now we have another alternative to choose from) , in this tutorial we will see the theme of Video in HTML5.
A good reason to use videos in our HTML5 is Apple’s decision not to support Flash on the iPhone and iPad. IOS , the operating system running on these phones , video supports MP4 .
Let’s start with the basics, to add a video we will need the following code:
<video src”videomp4”</video> <video "video.mp4"width"375"height"280"</video>
Good to have more control this tag can add width and height that is tall and wide as we do with the images , so quedaria the most complete code:
The course src attribute defines the direction of the video file as well as the img tag. We are also specifying the dimensions with the width and height attributes.
Multiple Sources to show video:
<video controls"controls"width"375 height="280"> <source src="sintelogg" type="videoogg"/> <source src="sintelmp4" type="videomp4"/> <source src="sintelwebm" type="videowebm"/> <!--comentario for browsers that do not support any video source--> Your browser does not support HTML5 video </video>
Being boolean can be used both ways
<video controls"controls"<video controls <video width"320"height"240"controls"controls" <source "video.ogg""video/ogg" /> <video controls"controls"width"375 height="280"> <source src="sintelogg" type="videoogg"/> <source src="sintelmp4" type="videomp4"/> <source src="sintelwebm" type="videowebm"/> </video> <video controls"controls""loop"<video loop <video controls"controls"muted"muted"<video muted <video poster"URL"<!-- use href for the location of the image---> <video poster"href="imagenespostervideojpg" <video preload"auto|metadata|none"
Metadata: the browser should load the metadata only when the page loads
None: the browser not to load the video when the page loads
Well since there is no standard format for HTML5 video must include several video files with different formats and sources that not all browsers read the same format , so we will make sure that the video is displayed in all modern browsers. Here’s what to do today because we do not know if browsers or manufacturer shall agree to choose one format to govern the web using the video tag .
What we do is remove the src inside the video tag, and create multiple src pointing to each video independently within the tags <video > < / video> .
It would be something like :
Well, I do not know if you’re wondering how you do to get these video formats for inclusion on the site . But if so , here I leave some links for you to download some video converter programs that will help you to get multiple video formats and especially those who need to insert into HTML5.
1 – Miro Video Converter ( http://www.mirovideoconverter.com ) .
Note : IExplorer 8 and earlier versions do not support the video tag .
The HTML5 video tag has several attributes to expand its operation , let’s see which are:
* Autoplay : What makes this attribute is automatically start the video when the page loads without the user to play .
* Controls : This attribute shows the classic controls (play , pause , volume, playtime , etc. ) on the video player ( each browser displays its own default player)
Width and Height: specify the height and height of the video, we do in pixels
* Src: The src attribute specifies the location (URL) of the video file.
The src attribute is an attribute that is type, which specifies the use of the media. The correct way to include this serious src attribute:
* Loop: The loop or loop attribute specifies that the video will begin again each time it is finished.
* Muted: This attribute specifies the output audio video should be silenced.
* Poster: This attribute specifies an image that displays while the video is downloaded, or until the user presses the play button. If this attribute is not included, the first video frame is used instead.
* Preload: start to preload the video regardless of user actions on the player.
You can have the properties:
Auto: the browser should load all the video when the page loads
This attribute is not used much ..