How to choose video compression and coding tools

  • Premiere Pro (recommended);
  • Handbrake: English interface, compression speed general, preview against rely on local player, H5 compression tutorial can refer to here;
  • Cat wo: Chinese interface, compression is convenient, suitable for conventional transcoding, but some versions will add a frame of black screen at the end of the video, parameter Settings reference Handbrake principle;
Premiere Pro is preferred for compression and transcoding, which is fast and convenient for framing

Ii. Basic Use of Premiere (PR for short)

1. Import and export

  1. New: Create a default project after opening PR
  2. Import: Menu file – – Import the original video, or directly drag the original video to the lower left corner of the workspace
  3. View: Double-click the video in the work area to view the confirmation video screen in the upper monitoring area
  4. Export: Select the video to export in the workspace and open export Settings in the menu file – export – Media

2. Export Settings

  1. formatchooseH.264
  2. The presetchooseMatch the source
  3. Name of the outputSelect the output directory
  4. belowBit rate settingA bar setTarget bit rate,Maximum bit ratefor1.5 MbpsOr so

Why set the bitrate size to 1.5Mbps?

The larger the bit rate of a video is, the more data needs to be loaded per unit time. Too large a bit rate will make the waiting time for the video to start playing longer, and the phenomenon of lag will also occur in weak networks. But too low bit rate will cause the video picture quality is too low, affect the vision.

Therefore, the bitrate should be adjusted according to the actual situation. The video with too many moving shots can be adjusted to 1.5, and the video with too few moving shots can be adjusted to 1-1.3.

3. Corresponding relationship between video frame number and time in PR

In the PR timeline, the last two digits refer to the number of frames of the video (for example, 25:24 refers to frame 24 of 25 seconds), but in H5 we get the current playing time of the video through the currentTime property (for example, 10.85 refers to 10.85 seconds). So we need to convert the time frame read in PR to the actual number of seconds so that we don’t have a big card error in H5.

Take the 25FPS video as an example, the time of each frame is 1s/25=0.04s, so 25:14 is 25.56, 25:24 is 25.8;

The number of frames of the video can be viewed by right-clicking on Video – Properties in PR

Three, why not video time monitoring and jump broadcast

This covers the timeUpdate event trigger interval and the basic principles of video encoding (I frames, P frames).

Start with HTMLMediaElement’s timeUpdate event. According to the MDN documentation, the timeUpdate event:

The frequency of this event is determined by the system, but it is guaranteed to be triggered 4-66 times per second (provided that each event processing does not exceed 250ms). User agents are encouraged to vary the frequency of events based on the load on the system and the average cost of processing events to ensure that UI updates do not affect video decoding.

The trigger frequency of many mobile phones measured in wechat Q and other browsers is about 250ms, so the video will always trigger a callback around 250ms at the time point you monitor. This is an error caused by the system refresh frequency, so there is basically no solution.

Then look at the basic principles of video coding (I frame, P frame) :

  • I frame, English full write Intra Picture, also known as frame coding frame, commonly known as key frame. Generally speaking, I frames do not need to rely on the information of before and after frames, and can be decoded independently. Some data show that the compression rate of only I frame can reach 7. In fact, the compression of I frame can be equal to the compression of a single picture. I frame compression only compresses spatial redundancy, which will be discussed in a future series of articles on coding.
  • P frame, full write predictive frame, also known as forward predictive coding frame, also known as inter predictive coding frame. As the name implies, P frame needs to rely on the previous I frame or P frame to encode and decode, because generally speaking, P frame stores the difference between the current frame and the previous frame (the previous frame may be EITHER I frame or P frame). In a more professional way, it compreses the time redundancy information or extracts the motion characteristics. The compression rate of P frames is about 20, and almost all H264 streams contain a large number of P frames.

Only I frame can be accessed randomly, so in practice what we’re doing is we’re setting currentTime to jump to a specific time, but sometimes we’re going to get a picture that’s not in that frame, and that’s why we’re jumping to P frame;

The solution is to reduce the keyframe distance. In the export Settings – Advanced Settings section of PR, the default value is 72.

X5 kernel browser video pop-up playback and solutions;

1. If there is no whitelist, the video will be full screen, the DOM element at the top of the video cannot be displayed, and a progress bar will appear;

This is X5 kernel browser special strategy, wechat, hand Q, QQ browser and other Tencent products will appear this situation; Previously only by adding domain name as X5 whitelist way to solve, fortunately Tencent has now opened the interface, you can set special attributes to solve, refer to here

Play within the same page is the standard mode of video playing. Add only one attribute (not existing at the same time with X5-playsinline) to the video TAB :x5-video-player-type=’h5-page’ to control the play within the same page. HTML elements can be displayed at the top of the video

V. Effects of different video attributes on multiple platforms

1. Play inline in Safari

Playsinline =”true” Webkit-playsinline =”true” : Inline playback on Safari kernel devices;

2, X5 kernel inline play (hand Q, wechat, QQ browser and other Tencent browsers)

X5-video-player-fullscreen: hides the application status bar and system status bar (Android only); x5-video-player-fullscreen: hides the application status bar and system status bar.

Reference:

Developer.mozilla.org/zh-CN/docs/…

Tgideas.qq.com/doc/fronten…

H5 video project development skills and notes

Wechat search public number: DigitMagic magic laboratory