This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge
Thank you for meeting me. Hi, I’m Ken
Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).
This blog is suitable for those who are new to HTML and those who want to review after a long time
🌊🌈 About:
8.1 Features of HTML5 multimedia
Before HTML5, there was no standard way to embed video and audio on a page, and multimedia content was in most cases placed on a page via third-party plug-ins or applications integrated into a Web browser.
For example, the most popular method by far is to embed video and audio into web pages through Adobe’s FlashPlayer plug-in.
Through this way to achieve the audio and video function, not only need to use third-party plug-ins and the implementation of complex and lengthy code, using the new HTML5 video tag and audio tag can avoid such a problem. In HTML5 syntax, the video tag is used to add video to the page, and the Audio tag is used to add audio to the page, so that users can directly view multimedia content on the page without downloading third-party plug-ins.
8.2 Multimedia Requirements
While HTML5 provides a simple and easy way to embed audio and video, in practice there are many factors to consider, such as the video and audio codec, browser, and so on.
8.2.1 Video and audio codec
Because the raw data of video and audio is generally large, if it is not encoded and put on the Internet, the transmission will consume a lot of time, unable to achieve smooth transmission or playback. At this time, the video and audio codec is used to compress the video and audio files, so that the normal transmission and playback of the video and audio can be realized.
1. Video codec
Video codecs define algorithms for encoding and decoding multimedia data streams. Among them, the encoder mainly encodes the data stream for storage and transmission. The decoder is mainly to decode the video file, for example, using the video player to watch the video, you need to decode first, and then play the video. At present, the most used HTML5 video decoding files are H.264, Theora and VP8, which are described below:
- H.264 _ H.264 is a new generation of digital video compression format after MPEG4 jointly proposed by the International Organization for Standardization (ISO) and the International Telecommunication Union (ITU). It is one of the video codecoding technical standards named by ITU-T with the name of H.26X series.
- Theora — Theora is a free and open video compression technology that supports video formats from VP3 HD to MPEG-4/DiVX.
- VP8 _ VP8 is the eighth generation of On2 video that delivers higher quality video with less data and requires less processing power to play video.
2. Audio codec
An audio codec defines an algorithm for encoding and decoding audio data streams. As video codecs work, audio encoders are used to encode data streams, and decoders are used to decode audio files. Currently, the most used HTML5 audio decoding files are AAC, MP3 and Ogg, which are described below.
- AAC _ AAC is short for Advanced Audio Coding, which is based on MPEG-2 Audio Coding technology. The purpose is to replace the MP3 format. After the advent of the MPEG-4 standard in 2000, AAC reintegrated its features, adding SBR technology and PS technology.
- MP3 _ MP3 is short for “MPEG-1 Audio Layer 3”. It is designed to significantly reduce the amount of whisker data. With this technology, music can be compressed into smaller files at 1:10 or even 1:12 compression rates. Sound quality was not significantly reduced.
- Ogg _ Ogg is a new audio compression format, similar to existing music formats such as MP3. One of OGG Vorbis’ outstanding features is that it supports multiple channels.
8.2.2 Multimedia Format
Using HTML5’s Video and Audio tags, you can embed video or audio files in the page. If you want these files to be loaded and played on the page, you need to set the correct multimedia format. The following are some common formats for video and audio in HTML5.
1. Video format
Video formats include video encoding, audio encoding, and container formats. The video formats embedded in HTML5 mainly include Ogg, MPEG4, WebM, etc., which are described as follows:
- Ogg: An Ogg file with Theora video encoding and Vorbis audio encoding.
- MPEG4: An MPEG4 file with H.264 video encoding and AAC audio encoding.
- WebM: WebM files with VP8 video encoding and Vorbis audio encoding.
2. Audio format
Audio format refers to audio files to be played or processed on the computer. The audio formats embedded in HTML5 mainly include Vorbis, MP3, Wav, etc., which are described as follows:
- Vorbis is another free, open source audio encoding similar to AAC. Vorbis is the next generation audio compression technology used to replace MP3.
- MP3: is an Audio compression technology, its full name is the MovingPicture Experts compression standard Audio Layer III (MovingPicture Experts Group Audio Layer III), referred to as MP3. It is designed to significantly reduce the amount of audio data.
- Wav: a standard Windows file format used for recording. The file name extension is “Wav”. The data format is PCM or compressed, which is one of the lossless music formats.
8.2.3 Browsers that Support video and Audio
So far, many browsers have implemented support for the video and audio elements of HTML5.
Browser support for video and Audio
| The browser | Support version |
|---|---|
| IE | Version 9.0 or later |
| Firefox | Version 3.5 or later |
| Opear | Version 10.5 and later |
| Chrome | Version 3.0 or later |
| Safari | Version 3.2 or later |
The above table shows how much video and audio elements are supported by major browsers. But the video also looks slightly different on different browsers. In different browsers, the same video playback controls display in different styles. This is because each browser has a different definition of the built-in video control style, which results in different control styles being displayed in different browsers.
That’s the end of today’s introductory study
Peace
🌊🌈
Akken’s HTML, CSS guide for getting started (1)_HTML basics akken’s HTML, CSS guide for getting started (2)_HTML page elements and attributes Akken’s HTML, CSS guide for getting started (3)_ Text style attributes Aken’s HTML, CSS getting started guide (four)_CSS3 selector Aken’s HTML, CSS getting Started guide (five)_CSS box model Aken’s HTML, CSS getting Started guide (six)_CSS box model Aken’s HTML, CSS getting Started guide (seven)_CSS box model Akken’s HTML, CSS guide for getting started (eight)_CSS box model akken’s HTML, CSS guide for getting Started (nine)_ Floating and positioning Akken’s HTML, CSS guide for getting started (ten)_ Floating and positioning Akken’s HTML, CSS Guide for getting started (eleven)_ Floating and positioning Ken’s HTML, CSS guide for getting started (12)_ Form application of HTML, CSS guide for getting started (13)_ form application of HTML, CSS guide for getting started (14)_ Form application of HTML, CSS guide for getting started (15)_ Form application
🌊🌈 About postscript:
Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add contact information in the personal introduction of the home page
Original is not easy, “like” + “comment” thanks for supporting ❤