What's new in HTML 5.0? Part 2: The introduction of audio and video elements.
Beginning of the article
In recent years, the placement of audio and video resources on the pages of websites has become increasingly popular, and projects such as YouTube , Viddler , Revver , MySpace have made the possibility of placing these elements more accessible to users. However, since at present the HTML format does not have wide possibilities for embedding audio and video, developers are trying to implement this using Flash. Although you can use and the introduction of various plug-ins, such as QuickTime, Windows Media, etc. But implementation on Flash is currently the most common way, as well as the most compatible with various browsers.
It should be noted that the developers in the process of creating flash-players are primarily interested in creating their own user interfaces that will have the basic functions: “play”, “pause”, “stop” and volume control. The idea is to present these functions in browsers, add support for video and audio embedding, and control playback using the DOM API.
')
New elements " video " and " audio " make it very easy to solve this problem. Most APIs are distributed between these two elements, with the only difference being the difference between visual and non-visual media resources.
The developers of Opera and WebKit have created a product with partial support for the video element. You can download these experimental products from Opera and WebKit and test. Opera supports Ogg Theora formats, and WebKit supports all QuickTime formats, even those developed by third-party publishers.
The easiest way to connect video elements to a site is to use the " video " tag, as well as allowing the browser to use the default user interface. The logical property " controls " allows you to determine whether or not you want to use the default user interface.
The optional attribute " poster " allows you to set a picture that will be displayed before the video playback begins. Although there are many formats that establish such a default picture (for example, MPEG-4), this solution is an alternative, providing support for any format.
It is also very simple to connect audio elements to the page using the " audio " tag. Most of the properties of the audio and video elements are the same, but for obvious reasons, the audio element lacks the width, height, and picture default properties.
HTML 5 also includes the " source " element, which allows you to determine the path to alternative video and audio files that the browser can choose based on the format it supports. The media property can be used to specify the source of a resource, based on the limited capabilities of the device, and to specify the type of the resource and the type of codec. Note that when the " source " element is used, the " src " attribute must be excluded from the parent audio and video element or these alternative paths will be ignored.
In recent years, the placement of audio and video resources on the pages of websites has become increasingly popular, and projects such as YouTube , Viddler , Revver , MySpace have made the possibility of placing these elements more accessible to users. However, since at present the HTML format does not have wide possibilities for embedding audio and video, developers are trying to implement this using Flash. Although you can use and the introduction of various plug-ins, such as QuickTime, Windows Media, etc. But implementation on Flash is currently the most common way, as well as the most compatible with various browsers.
It should be noted that the developers in the process of creating flash-players are primarily interested in creating their own user interfaces that will have the basic functions: “play”, “pause”, “stop” and volume control. The idea is to present these functions in browsers, add support for video and audio embedding, and control playback using the DOM API.
')
New elements " video " and " audio " make it very easy to solve this problem. Most APIs are distributed between these two elements, with the only difference being the difference between visual and non-visual media resources.
The developers of Opera and WebKit have created a product with partial support for the video element. You can download these experimental products from Opera and WebKit and test. Opera supports Ogg Theora formats, and WebKit supports all QuickTime formats, even those developed by third-party publishers.
The easiest way to connect video elements to a site is to use the " video " tag, as well as allowing the browser to use the default user interface. The logical property " controls " allows you to determine whether or not you want to use the default user interface.
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
Download movie
The optional attribute " poster " allows you to set a picture that will be displayed before the video playback begins. Although there are many formats that establish such a default picture (for example, MPEG-4), this solution is an alternative, providing support for any format.
It is also very simple to connect audio elements to the page using the " audio " tag. Most of the properties of the audio and video elements are the same, but for obvious reasons, the audio element lacks the width, height, and picture default properties.
Download song
HTML 5 also includes the " source " element, which allows you to determine the path to alternative video and audio files that the browser can choose based on the format it supports. The media property can be used to specify the source of a resource, based on the limited capabilities of the device, and to specify the type of the resource and the type of codec. Note that when the " source " element is used, the " src " attribute must be excluded from the parent audio and video element or these alternative paths will be ignored.
<source src = "music.mp3" type = "audio / mpeg"> </ audio> </ code> </ blockquote> For developers who want more control over the user interface to make it fit the overall design of the web page, the API extensions allow you to use several methods and events that allow the script to control the playback of the media resource. The simplest methods are: <strong> play () </ strong>, <strong> pause () </ strong>, and setting <strong> currentTime </ strong> to return to the beginning. <blockquote> <code> <video src = "video.ogg" id = "video"> </ video> <script> var video = document.getElementById ("video"); </ script> <p> <button type = "button" onclick = "video.play ();"> Play </ button> <button type = "button" onclick = "video.pause ();"> Pause </ button> <button type = "button" onclick = "video.currentTime = 0;"> << Rewind </ button> </ code> </ blockquote> There are also many other video and audio elements and API extensions not covered in this article. In more detail, you can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video"> read about it in the current HTML 5 specification </ a> </ habracut>
Source: https://habr.com/ru/post/19680/
All Articles