HTML5 Video - from A to Z
Yes, yes, this is another article about html5 and the <video> tag. But its main difference will be that the most basic concepts and theories will be considered here. So get ready to carefully read and write, let html5 rocks !
So, to make the video appear on your web page, we write the following code:
Immediately pay attention to the <source> tag, which allows you to include videos of different formats, which is important in cases where one of them is not supported by a particular browser.
Of course, there is a simpler version of video insertion:
It remains to be hoped that in the near future for all browsers there will be enough of this option.
And now it’s worth mentioning another important thing. Do not forget to set the correct MIME type in the Content-Type headers on your server. Otherwise, the video will either not work at all, or will not work for everyone. In the case of Apache, everything is decided by adding the following lines to httpd.conf:
If you work with Google App Engine, then for each video format in the app.yaml file you need to add a record like this:
')
And another very important thing worth mentioning. It is necessary to specify the values ​​of the type parameter in the source tag in order for the browser to automatically recognize the required format and load it, which will increase the performance.
A video file in any of the video formats should be interpreted as a zip-archive containing a video stream and an audio stream . Here are the three most common video formats on the web:
(Unfortunately, Habr does not allow inserting examples from the original site, so you will have to watch them there - note of the translation.)
At the time of this writing (August 2010), the most correct and complete code for inserting video is the following:
One “BUT” - if you expect that your site will be used under the iPad, specify the video in .mp4 format first, this feature is related to the bug on the iPad itself.
And since we are talking about .mp4, a number of points should be noted. First, the h.264 video codec is not free, so you have to pay for the license. You can read about it here . Secondly, you need to be absolutely sure in the specified video and audio codecs, they may differ from video to video. The most common can be considered "avc1.42E01E, mp4a.40.2", so just in case check here .
A storm of delight flashed through the Internet when the new IE 9 came out. However, as long as there are happy owners of IE 6, you have to try it out. A couple of possible solutions.
The advantage of using the Chrome Frame plugin is that it can be put only once, and all new HTML, JavaScript and CSS features will be supported without any update. This plugin is a rescue for web developers who will not bother and waste time writing an IE-compatible version of the site. ( A slightly controversial statement, especially if you remember what the noise was on the network when this plugin came out. )
Well, no one has canceled the flash - we recognize the browser, we see, we load the flash. Especially since Adobe has added .webm format to the list of playable video formats. So you don’t even have to think about recoding.
If there is a need to convert video, then a good program is Miro Converter , which has versions for Windows and Mac. The program does not have many opportunities to play with the parameters, but it allows you to convert into three main formats. And if you look at it more closely, you can see that it is a shell for ffmpeg and ffmpeg2theora , which work in all operating systems from under the command line. Details about this program can be found here .
Since we embed the video in a full html way, then we can use the full power of the web for our purposes. Below I will describe what this power is. ( Unfortunately, again without illustrative examples, so go to the original site )
To begin with, we can use various HTML attributes. For example, the parameter tabindex allows you to set the position. There are a couple of parameters that exist in audio, these are loop and autoplay . In the parameter poster, you can specify a picture that will be displayed during the video download. Having specified the controls, we will say to the browser - “Use native controls, we haven't come up with anything here.” Well, there is still a preload , which allows you to load the video background. As a result, we get something like this:
Well, an option for those who comply with the standards:
The video tag has a number of parameters that can be controlled using javascript. An example can be seen on the W3 website.
To begin with, like any html component, the video responds to all standard events, such as mouse hovering, dragging, and so on. But besides them, it has a number of its own, allowing you to determine when the video was launched, stopped, and so on. Already from the moment of video upload, we can use a number of events related to both networking (loadstart, progress, suspend, abort, error, emptied, stalled) and buffering (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough ). A simple example showing how you can set up video playback at the moment when it is ready to play:
The network has already been laid out and custom settings have already appeared, allowing you to control, for example, playback speed or add interaction between 2 videos.
There is almost no comment - video as an element of the web page takes all sorts of css pieces - from the border , opacity and ending with masks, gradients, transforms, transitions and animations. It all depends solely on your imagination.
HTML5 brought another powerful thing to this world - canvas. And what prevents us from using these two innovations together? That's right - nothing.
An example of sharing canvas and video can be as follows - getting screenshots from the video being played. Canvas has a drawImage method that allows you to get videos from 3 sources: from the image itself, from another canvas and from video ! And with the help of another method - toDataURL we already export the image in the format we need. The following listing shows how to take screenshots from a video every 1.5 seconds:
I think people with rich imagination have already imagined what can be invented here. For them and everyone who is interested in the possibility of receiving video frames there is an interesting thing - WebGL .
SVG provides us with the ability to programmatically control the display of vector graphics. But besides this there is such a wonderful thing as SVG filter effects . Using these filters, you can apply specific effects to individual webpage elements. It looks like this:
A similar inline processing option works in Firefox 4 and IE9, for other browsers javascript and css are already required.
No doubt, many have already managed to appreciate the benefits of the new html component. On the Internet ( and on Habré - a comment of the lane ) the mass of examples is already laid out ( 1 , 2 , 3 , 4 , 5 , 6 )
I am glad that nobody is going to stop at what has been accomplished, and perhaps in the future we will have the opportunity to work with a microphone and a camera and support broadcasting .
Write the code
So, to make the video appear on your web page, we write the following code:
< video >
< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
</ video > >Immediately pay attention to the <source> tag, which allows you to include videos of different formats, which is important in cases where one of them is not supported by a particular browser.
Of course, there is a simpler version of video insertion:
< video src ="movie.webm" ></ video >It remains to be hoped that in the near future for all browsers there will be enough of this option.
And now it’s worth mentioning another important thing. Do not forget to set the correct MIME type in the Content-Type headers on your server. Otherwise, the video will either not work at all, or will not work for everyone. In the case of Apache, everything is decided by adding the following lines to httpd.conf:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webmIf you work with Google App Engine, then for each video format in the app.yaml file you need to add a record like this:
- url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
')
And another very important thing worth mentioning. It is necessary to specify the values ​​of the type parameter in the source tag in order for the browser to automatically recognize the required format and load it, which will increase the performance.
Video formats
A video file in any of the video formats should be interpreted as a zip-archive containing a video stream and an audio stream . Here are the three most common video formats on the web:
- mp4 = H.264 + AAC
- .ogg / .ogv = Theora + Vorbis
- .webm = VP8 + Vorbis
(Unfortunately, Habr does not allow inserting examples from the original site, so you will have to watch them there - note of the translation.)
At the time of this writing (August 2010), the most correct and complete code for inserting video is the following:
< video >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.mp4" type ='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download the video < a href ="movie.webm" > here </ a > .
< video > >One “BUT” - if you expect that your site will be used under the iPad, specify the video in .mp4 format first, this feature is related to the bug on the iPad itself.
And since we are talking about .mp4, a number of points should be noted. First, the h.264 video codec is not free, so you have to pay for the license. You can read about it here . Secondly, you need to be absolutely sure in the specified video and audio codecs, they may differ from video to video. The most common can be considered "avc1.42E01E, mp4a.40.2", so just in case check here .
IE;)
A storm of delight flashed through the Internet when the new IE 9 came out. However, as long as there are happy owners of IE 6, you have to try it out. A couple of possible solutions.
Chrome frame
The advantage of using the Chrome Frame plugin is that it can be put only once, and all new HTML, JavaScript and CSS features will be supported without any update. This plugin is a rescue for web developers who will not bother and waste time writing an IE-compatible version of the site. ( A slightly controversial statement, especially if you remember what the noise was on the network when this plugin came out. )
Back to flash
Well, no one has canceled the flash - we recognize the browser, we see, we load the flash. Especially since Adobe has added .webm format to the list of playable video formats. So you don’t even have to think about recoding.
Encrypted, or need to transcode video
If there is a need to convert video, then a good program is Miro Converter , which has versions for Windows and Mac. The program does not have many opportunities to play with the parameters, but it allows you to convert into three main formats. And if you look at it more closely, you can see that it is a shell for ffmpeg and ffmpeg2theora , which work in all operating systems from under the command line. Details about this program can be found here .
Buns
Since we embed the video in a full html way, then we can use the full power of the web for our purposes. Below I will describe what this power is. ( Unfortunately, again without illustrative examples, so go to the original site )
Video + HTML
To begin with, we can use various HTML attributes. For example, the parameter tabindex allows you to set the position. There are a couple of parameters that exist in audio, these are loop and autoplay . In the parameter poster, you can specify a picture that will be displayed during the video download. Having specified the controls, we will say to the browser - “Use native controls, we haven't come up with anything here.” Well, there is still a preload , which allows you to load the video background. As a result, we get something like this:
< video poster ="star.png" autoplay loop controls tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
</ video >
Well, an option for those who comply with the standards:
< video poster ="star.png" autoplay ="autoplay" loop ="loop" controls ="controls" tabindex ="0" >
< source src ="movie.webm" type ='video/webm; codecs="vp8, vorbis"' />
< source src ="movie.ogv" type ='video/ogg; codecs="theora, vorbis"' />
</ video >
Video + JS
The video tag has a number of parameters that can be controlled using javascript. An example can be seen on the W3 website.
To begin with, like any html component, the video responds to all standard events, such as mouse hovering, dragging, and so on. But besides them, it has a number of its own, allowing you to determine when the video was launched, stopped, and so on. Already from the moment of video upload, we can use a number of events related to both networking (loadstart, progress, suspend, abort, error, emptied, stalled) and buffering (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough ). A simple example showing how you can set up video playback at the moment when it is ready to play:
video.addEventListener( 'canplay' , function (e) {
this .volume = 0.4;
this .currentTime = 10;
this .play();
}, false
The network has already been laid out and custom settings have already appeared, allowing you to control, for example, playback speed or add interaction between 2 videos.
Video + CSS
There is almost no comment - video as an element of the web page takes all sorts of css pieces - from the border , opacity and ending with masks, gradients, transforms, transitions and animations. It all depends solely on your imagination.
Video + canvas
HTML5 brought another powerful thing to this world - canvas. And what prevents us from using these two innovations together? That's right - nothing.
An example of sharing canvas and video can be as follows - getting screenshots from the video being played. Canvas has a drawImage method that allows you to get videos from 3 sources: from the image itself, from another canvas and from video ! And with the help of another method - toDataURL we already export the image in the format we need. The following listing shows how to take screenshots from a video every 1.5 seconds:
video_dom.addEventListener( 'play' , function () {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext( '2d' );
draw_interval = setInterval( function () {
// import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL( 'image/png' );
img.width = 40;
frames.appendChild(img);
}, 1500)
}, false );
I think people with rich imagination have already imagined what can be invented here. For them and everyone who is interested in the possibility of receiving video frames there is an interesting thing - WebGL .
Video + SVG
SVG provides us with the ability to programmatically control the display of vector graphics. But besides this there is such a wonderful thing as SVG filter effects . Using these filters, you can apply specific effects to individual webpage elements. It looks like this:
< svg id ='image' version ="1.1" xmlns ="http://www.w3.org/2000/svg" >
< defs >
< filter id ="myblur" >
< feGaussianBlur stdDeviation ="1" />
</ filter >
</ defs >
</ svg >
< style >
video { filter:url(#myblur); border: 2px solid red; }
</ style >A similar inline processing option works in Firefox 4 and IE9, for other browsers javascript and css are already required.
Conclusion
No doubt, many have already managed to appreciate the benefits of the new html component. On the Internet ( and on Habré - a comment of the lane ) the mass of examples is already laid out ( 1 , 2 , 3 , 4 , 5 , 6 )
I am glad that nobody is going to stop at what has been accomplished, and perhaps in the future we will have the opportunity to work with a microphone and a camera and support broadcasting .
Source: https://habr.com/ru/post/104591/
All Articles