Skip to main content

Streaming videos from a website with Html-dash and hls

Why would I want to use hls or dash?
Dash and Hls are great for streaming large files and give the user the ability to jump around in the video, fast forward, rewind or jump to an index.  In the past you needed expensive streaming servers and serve videos using rtrtsp: or mms:

In StreamEngine convert a file you want to stream from a website to mp4-hls, mp4-dash or mp4-hls+dash.  This will create a tar or tar.gz file
DASH - Dynamic  Adaptive Streaming over HTTP

then copy the file to your webserver and name it playlist.m3u8 or modify the <source src = "playlist.m3u8" ... line below.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS-DASH Player</title>
    <link href="https://vjs.zencdn.net/7.20.3/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</head>
<body>
    <video-js id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360">
        <source src="playlist.m3u8" type="application/x-mpegURL">
    </video-js>

    <script>
        var player = videojs('my-video');
        player.play();
    </script>
</body>
</html>

This HTML file does the following:

  1. It includes the video.js CSS and JavaScript files from a CDN.
  2. It creates a video player using the video-js tag.
  3. It sets the source of the video to your playlist.m3u8 file.
  4. It initializes the video.js player and attempts to start playback.

To use this:

  1. Save this HTML code to a file (e.g., player.html) on your web server.
  2. Make sure your playlist.m3u8 file is in the same directory as the HTML file, or update the src attribute with the correct path to your playlist file.
  3. Access the HTML file through your web server (e.g., https://yourserver.com/player.html).

Note:

  • Ensure that your web server is correctly configured to serve the .m3u8 file with the correct MIME type (application/x-mpegURL).
  • The player's size is set to 640x360 pixels. You can adjust these values as needed.
  • This example uses video.js version 7.20.3. You may want to check for the latest version and update the URLs accordingly.

 

Back to top