Videojs Player Demo

11 June, 2022

HTML5
Video
HLS
DASH

The following videos use the popular Videojs open source player.


Try loading this page on different browsers and devices and almost all, mobile as well as desktop, will play the adaptive bitrate format - HLS or DASH.


See this demo for an example of how to use just the HTML5 <video> tag to play adaptive bitrate HLS video.


This article explains how using HLS for videos can save money and provide a better user experience.



source1 = HLS, source2 = MP4 

  <head>
    <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
  </head>

  <body>
    <video class="video-js" controls preload="auto" width="320" height="180" poster="https://www.managedtime.com/videos/forest-h5-poster.jpg" data-setup="{}">
      <source src="https://managedtime.com/videos/forest_scene_h5_AVC_HLS/5b9f053ac8009981b24e64c393f5659a.m3u8" type="application/x-mpegURL" />
      <source src="https://www.managedtime.com/videos/forest_scene_h5_1080p_AVC_6_mp4.mp4" type="video/mp4" />
      <p class="vjs-no-js">Your browser is not HTML5 capable</p>
    </video>

    <script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
  </body>


source1 = DASH, source2 = MP4 

  <head>
    <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
  </head>

  <body>
    <video class="video-js" controls preload="auto" width="320" height="180" poster="https://www.managedtime.com/videos/forest-h5-poster.jpg" data-setup="{}">
      <source src="https://www.managedtime.com/videos/forest_scene_h5_AVC_DASH/110514add6124abeb185835747cc66af.mpd" type="application/dash+xml" />
      <source src="https://www.managedtime.com/videos/forest_scene_h5_1080p_AVC_6_mp4.mp4" type="video/mp4" />
      <p class="vjs-no-js">Your browser is not HTML5 capable</p>
    </video>

    <script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
  </body>

About The Author

Akeel Din

Technology expert from Austin, TX. Writes about cloud computing, video processing and technology. Follow him on social media.