In the last blog post, we discussed the fundamentals of the modern web video player. In this article, we’ll continue to explain how the various components of video players work.
Video resource preprocessing
Video resource preprocessing is mainly meant to process, encrypt (if necessary) and segment the original video. Processing involves encoding the original video into videos with different resolutions. Segmentation involves dividing the videos with different resolutions into many small video segments. For example, after preprocessing a two-hour video resource, the output would be 4K, 2K, 720p resolution videos. Each one contains 1440 video segments of 5 seconds each.
Video resource caching
To boost users' download speed, all preprocessed video resources will be uploaded and cached to at least one CDN server.
Generating the manifest file
After completing the steps above, the server generates the corresponding resource description file according to the different playback handler specifications. For example, in the case of the dash, the resource description file looks like the below:
This manifest file gives us some key information:
- The video’s resource duration is 634.566 seconds: mediaPresentationDuration="PT634.566S".
- Resources include two parts: video and audio (two AdaptationSet tags on the manifest file: one of the types is video/mp4, and another type is audio/mp4).
- For video resources, there are 10 different degrees of resolution (10 different Representation tags under the Representation tag). We could get the resolution information from the Representation id, while the bandwidth value represents the required bandwidth for its related resolution.
- Each resolution includes 159 video segments. (Calculated this way: mediaPresentationDuration / duration / timescale).
Playing
After the manifest file is downloaded, the playback handler uses the information in that file to determine which video segments to download based on the user's network status and other factors. The video segments are then handed over to the native video player to play. The Playback Handler continuously monitors the user's network status and makes adjustments to choose the most appropriate video resource for loading or caching.
Vanilla video player
The native player, as the infrastructure of the video player, can combine with the playback handler to exhibit more powerful capabilities, as long as the browser supports the MSE specification.
Summary
Modern video players have revolutionized the way we watch videos and have brought about several improvements over their traditional counterparts. The separation of player UI and player allows different players to have different skins. The combination of player UI and player state manager frees up the video player from restrictions and provides more features and interactivity. As we continue to embrace open-source, the playback handler will continuously evolve to provide a more stable and efficient foundation for native video players.
Disclaimer: The statements and opinions expressed in this article are those of the author(s) and do not necessarily reflect the positions of Thoughtworks.