HTML5 Video Demo

15 June, 2022

HTML5
videojs
Video
HLS

The HTML5 <video> tag is used to play all of these videos. The browser tries to play source1 video first. If it can't, it tries source2. You should have many sources for your video to make sure they play on all devices and browsers.


Try loading this page on different browsers and desktop as well as mobile devices and see which source video plays on each.


See this demo for how to use the open source Videojs player. This consistantly plays HLS version on almost all browsers and devices.


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



source1 = MP4, source2 = Ogg 

  <video width="320" height="180" controls poster="https://www.managedtime.com/videos/forest-h5-poster.jpg">
    <source src="https://www.managedtime.com//videos/forest_scene_h5_1080p_AVC_6_mp4.mp4" type="video/mp4">
    <source src="https://www.managedtime.com/videos/forest_scene_imovie_1080p_mediumQuality_ogg.ogg" type="video/ogg">
    Your browser is not HTML5 capable
  </video>


source1 = MP4, source2 = WebM 

  <video width="320" height="180" controls poster="https://www.managedtime.com/videos/forest-h5-poster.jpg">
    <source src="https://www.managedtime.com//videos/forest_scene_h5_1080p_AVC_6_mp4.mp4" type="video/mp4">
    <source src="https://www.managedtime.com/videos/forest_scene_h5_1080p_HEVC_4_5_webm.webm" type="video/webm">
    Your browser is not HTML5 capable
  </video>


source1 = HLS, source2 = MP4 

  <video width="320" height="180" controls poster="https://www.managedtime.com/videos/forest-h5-poster.jpg">
    <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">
    Your browser is not HTML5 capable
  </video>


source1 = DASH, source2 = MP4 

  <video width="320" height="180" controls poster="https://www.managedtime.com/videos/forest-h5-poster.jpg">
    <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">
    Your browser is not HTML5 capable
  </video>

About The Author

Akeel Din

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