Earlier, native web technologies such as\u00a0HTML\u00a0didn’t allow embedding video and audio on the Web. Plugin-based technologies became popular for handling such content, but they had many problems, including not working well with HTML\/CSS\u00a0features, security and accessibility issues. Later,\u00a0HTML5\u00a0specification introduced such features with the\u00a0<video>\u00a0and\u00a0<audio>\u00a0elements.<\/p>\n\n\n\n
The <audio> element is used to embed audio files to a web page, and the <video> element is used to embed a video.<\/p>\n\n\n\n
Before HTML5, audio files were added to the page by integrating background sound with the help of <bgsound> tag. The file was played while the page was viewed, and the user couldn\u2019t mute the sound. In HTML5, we can embed audio files using the <audio> tag, and there is no need to connect third-party plugins. The audio element can be controlled with HTML or\u00a0Javascript\u00a0and styled with CSS.<\/p>\n\n\n\n
In the code, the src attribute refers to the URL of the audio file, and the controls attribute adds a control panel (launch button, scroll bar, volume regulator).<\/p>\n\n\n\n
<audio src=\"name.ogg\" controls><\/audio><\/code><\/pre>\n\n\n\nAudio Codecs and Audio File Formats<\/h2>\n\n\n\n
As not all browsers support all audio formats, the audio file is encoded\/decoded with an audio codec (a digital electronic device or computer-based software application that aids in the compression and decompression of a digital audio data). All formats of audio files are added simultaneously via the\u00a0<source>\u00a0element with the\u00a0src\u00a0attribute.<\/p>\n\n\n\n
When defining different file formats, we recommend to define\u00a0MIME-type\u00a0for each file, in order to let the browser localize supported file. The MIME-type is defined by the help of the\u00a0type\u00a0attribute.<\/p>\n\n\n\n
Example of adding different formats of audio files:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <audio controls>\n <source src=\"\/build\/audios\/jingle_bells.ogg\" type=\"audio\/ogg\">\n <source src=\"\/build\/audios\/audio.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <p>Click the play button<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe most popular audio formats are the following ones:<\/p>\n\n\n\n
MP3<\/strong> \u2013 the most popular audio format, which uses lossy compression and permits to reduce the file size. Despite the popularity among the users, TV companies and radio stations use more modern codecs ISO-MPEG, like AAC or MPEG-H.<\/p>\n\n\n\nAAC<\/strong> (Advanced Audio Codec) \u2014 closed codec, MP3 analog, but comparing to the latter, it provides higher quality with the same or stronger compression degree.<\/p>\n\n\n\nOgg Vorbis<\/strong>\u2014 free format with an open code, supported in Firefox, Opera and Chrome. Provides good quality sound, but not sufficiently supported by device players.<\/p>\n\n\n\nHow to Add Video Files<\/h2>\n\n\n\n
In previous version of HTML, videos were embedded into the site via third-party plugins, such as QuickTime, RealPlayer or Flash. HTML5 has a new\u00a0<video>\u00a0tag, which is used to insert a video into the web page.<\/p>\n\n\n\n
In a code, it looks like this:<\/p>\n\n\n\n
<video src=\"example.webm\" controls><\/video><\/code><\/pre>\n\n\n\nThe src attribute indicates the URL of the file, and the controls attribute is used to display control elements.<\/p>\n\n\n\n
Video Codecs and Video File Formats<\/h2>\n\n\n\n
Each browser supports particular codec, that\u2019s why, in order to provide video playback in all browsers, the video file must be placed in a few formats. Like in the case of audio files, all formats of video files are included in the <source> element, starting with the most preferred one. Every video file must have its MIME-type, which is defined by the type attribute.<\/p>\n\n\n\n
To make sure, that the browser can process video files, create a file .htaccess in the folder, where the web site is situated, which defines MIME-types for a video.<\/p>\n\n\n\n
Example of adding different formats of video files:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n video {\n width: 300px;\n height: 220px;\n border: 1px solid #666;\n }\n <\/style>\n <\/head>\n <body>\n <video controls>\n <source src=\u201dhttp:\/\/techslides.com\/demos\/sample-videos\/small.ogv\u201d type=\"video\/ogg\">\n <source src=\"\/build\/videos\/arcnet.io(7-sec).mp4\" type=\"video\/mp4\">\n <\/video>\n <p>Some information about video<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Today there are 3 basic video formats: MP4\/MPEG-4, OGG and WebM +. For video data compression and their playback, we use codecs.<\/p>\n\n\n\n
For a video file of the MPEG-4<\/strong> format, the \u041d.264 video codec and \u0410\u0410\u0421 audio codec are used. If you want to use codecs, you must get a license.<\/p>\n\n\n\nFor the Ogg<\/strong> video file, use the Theora video codec and the Vorbis audio codec with an open code.<\/p>\n\n\n\nFor the video files of the WebM +<\/strong> format, use the VP8 video codec and the Vorbis audio codec. In this case, a license is not required.<\/p>\n\n\n\nMost servers don’t serve Ogg or mp4 media with the correct MIME types. For this, you may need to add the appropriate configuration.<\/p>\n\n\n\n
AddType audio\/ogg .oga\nAddType audio\/wav .wav\nAddType video\/ogg .ogv .ogg\nAddType video\/mp4 .mp4<\/code><\/pre>\n\n\n\nHow to Add Subtitles and Headings<\/h2>\n\n\n\n
Subtitles and headings are added to audio and video files via the\u00a0<track>\u00a0element, which is used as a child element of <audio> and <video>.<\/p>\n\n\n\n
Example of adding subtitles and headings to audio and video files:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n video {\n width: 300px;\n height: 200px;\n border: 1px solid #666;\n }\n <\/style>\n <\/head>\n <body>\n <video controls muted src=\"\/build\/videos\/arcnet.io(7-sec).mp4\">\n <track default kind=\"subtitles\" srclang=\"en\" src=\"\/build\/videos\/arcnet.io(7-sec).mp4\" \/>\n <\/video>\n <p>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
To align the video player on the page, place the <video> element into the\u00a0<div>\u00a0container, assign it a class, and then define the width and the height for it, corresponding to the size of your video.<\/p>\n\n\n\n
Audio and Video Attributes<\/h2>\n\n\n\nAttribute<\/th> Description<\/th><\/tr><\/thead> autoplay<\/td> Allows the audio\/video to automatically start playing while the rest of the page is loading.<\/td><\/tr> autobuffer<\/td> Allows the audio\/video to automatically begin buffering.<\/td><\/tr> controls<\/td> Allows controlling the audio\/video playback, including volume, pause\/resume playback.<\/td><\/tr> loop<\/td> Allows the audio\/video to play again whenever it finishes.<\/td><\/tr> muted<\/td> Makes the media play with the turned off sound by default.<\/td><\/tr> preload<\/td> Specifies buffering large files. It can have one of these values:<\/td><\/tr> “none”, which does not buffer the file.<\/td><\/tr> “auto”, which buffers the media file.<\/td><\/tr> “metadata”, which buffers only the metadata for the file.<\/td><\/tr> src<\/td> The URL of the audio\/video to embed. It is optional.<\/td><\/tr> poster<\/td> This is a URL of an image displayed before the video is played.<\/td><\/tr> width<\/td> Specifies the display area width of the video, in CSS pixels.<\/td><\/tr> height<\/td> Specifies the display area height of the video, in CSS pixels.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"Earlier, native web technologies such as\u00a0HTML\u00a0didn’t allow embedding video and audio on the Web. Plugin-based technologies became popular for handling such content, but they had many problems, including not working well with HTML\/CSS\u00a0features, security and accessibility issues. Later,\u00a0HTML5\u00a0specification introduced such features with the\u00a0<video>\u00a0and\u00a0<audio>\u00a0elements. The <audio> element is used to embed audio files to a web […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[425],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8481"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8481"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8481\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}