“This is the 21st day of my participation in the August Text Challenge.

Video coding

Video, in fact, is a series of images played continuously, and if you play 24 images for 1 second, the frame rate of the video is 24.

If the size of the video is 1920*1080, that is, the size of an image is 1920*1080*3 bytes, multiplied by 3 because a pixel has 3 bits to store RBG respectively, then the storage space required for a 30-minute video is as follows:

// Storage space required for 1s videos: 1920 x 1080 x 3 x 24 bytes //30min Storage space required for 1s videos: 1920 x 1080 x 3 x 24 x 60 x 30=250.28GBCopy the code

As you can see, it’s very large, so the video needs to be compressed, and that’s where the concept of codec comes in. The encoding format of video can be understood as compression format. Different encoding formats have different compression rates. Common encoding formats include H264, MPEG4, VP8 and so on.

In addition, it should be noted that the encoding format is copyrighted, so different browsers support different encoding formats, so some encoding formats may not play in some browsers, or only sound without screen.

The only thing we need to keep in mind for our front-end development is that the video encoding format supported by the major browsers is H264.

Encapsulation format

A video file contains video stream and audio stream, as well as some metadata, such as resolution information and title, etc. The format of this file is called package format, which can be understood as package format. Mp4, WebP, MOV, MPEG and other common formats are all packaged formats.

The package format is often independent of the video encoding, an MP4 file, the video streaming encoding can be H264, or MPEG, so there will be the same MP4 file, some browsers can play, some browsers can not play the problem.

Audio and Video labels

<video controls poster="1.jpg" src="1.mp4" loop muted></video>
<audio controls src="1.mp3"></audio>
Copy the code

SRC specifies the resource address, poster specifies a cover image for the video, controls indicates that the browser should display the UI control (each browser has a different style)

Commonly used attributes

Here are the general attributes for video and audio

Common event

Video and Audio Common events

Commonly used method

  • Play () controls the start of the video
  • Pause () Controls the pause of a video

With the above properties, events, and methods, we can do a lot of things, such as customizing the player, using the player to preview videos locally, and so on.

Next article will be an example of implementing a video player.