Each video is created with several different streams, at different resolutions and quality (read: size of the video). This would certainly be a step forward, but what if the mobile device was on fast Wi-Fi and could have handled the faster video? Or what if the device with the larger screen was on a slower network (or the network conditions changed during playback)? How can we deliver smaller videos? Perhaps we could write some JavaScript to deliver “myvideo_1080.mp4” to devices with large screens, and “myvideo_720.mp4” just to mobile devices. The additional pixels will make the file larger, and therefore take longer to arrive on slower networks. In the example above, we can assume that the video is 1080p, which may be larger than required for mobile handsets. … there is just one file - no matter the size of the screen, or the quality of the network. When delivering a video with the video tag…

However, if the top companies delivering video content on the web are streaming their videos – and most other pages are not – is there something that can be learned here? Could streaming video be faster, more efficient, and have a better customer experience? I believe the answer is yes, but there is a little legwork that must be done to ensure that your video is streaming to its optimal potential.įinally, setting up video streaming is fairly straightforward, and no longer requires any specialised hardware – any HTTP server can serve streaming content.

Generally (as a web developer), I assume that these pages use the video tag, not streaming. When I think of “video on the web,” I generally think about pages with a background video, or another fun immersive feature that makes the page engaging. When I think of video streaming, I typically think of Netflix, Amazon or YouTube - the major providers of video on the web today.

Sample m3u8 .ts files