Video streaming

HTML5 introduced possibility to link video using <video> tag

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Video</title>
  </head>
  <body>
    <video src="some_video.mp4" width="1280px" height="720px" />
  </body>
</html>

This video tag also provides various APIs to e.g. play, pause, seek or change the speed at which the video plays. Those APIs are directly accessible through JavaScript:

//pause the video
myVideo.pause()

// seek to 10 seconds
myVideo.currentTime = 10;

The Media Source Extensions

The “Media Source Extensions” (more often shortened to just “MSE”) is a specification from the W3C that most browsers implement today. It was created to allow those complex media use cases directly with HTML and JavaScript.

Web (to change)

Video streaming

HTML5 introduced possibility to link video using <video> tag

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Video</title>
  </head>
  <body>
    <video src="some_video.mp4" width="1280px" height="720px" />
  </body>
</html>

This video tag also provides various APIs to e.g. play, pause, seek or change the speed at which the video plays. Those APIs are directly accessible through JavaScript:

//pause the video
myVideo.pause()

// seek to 10 seconds
myVideo.currentTime = 10;

The Media Source Extensions

Great article explaining how Media Source Extensions (MSE) + SourceBuffer works (and video streaming in general)

PreviousTrends NextTime series

Last updated 2 years ago

Was this helpful?