Web Video Player

  Introduction In the last post, we have looked upon how the video element work, various events and hls. Now its time to build the custom web player. Building Up Preparing m3u8 For preparing the hls playlist file (m3u8) we will be using the ffmpeg. For this I have taken the a video from Pexels site. There are various commands/syntax available for preparing the m3u8 which supports the adaptive bitrate stream. For this, I have taken the following code: ffmpeg -hide_banner -y -i green_plants-pexels.mp4^ -vf scale=w=640:h=360:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 800k -maxrate 856k -bufsize 1200k -b:a 96k -hls_segment_filename green_plants-pexels/360p_%03d.ts green_plants-pexels/360p.m3u8 ^ -vf scale=w=842:h=480:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls...

  Introduction Web video player is used to embed video on webpage and play the video online without downloading it.   Video tag was introduced in the HTML5 which allows the admin to place videos on their web pages directly. Before HTML5, plugins like Adobe Flash Player were used in order to place streaming video on website. We can even use our own designed controls for embedding video hosted on platforms like YouTube, Vimeo etc. Why we need custom Web Player The main problem with just using the video tag is  the different design on different browsers.   Screenshot of comparison Another disadvantage is that videos can be easily accessed for download. Further, it does not have built-in feature like Transcript or Quality change.   Understanding video element and Attributes A simple example of embedding video is as follow. <video width="480" controls> <source src="https://media-webplayer.ne...