Membrane broadcasting tutorial

In this really short chapter, we will take a look at how one can play the video delivered with HLS on the website.

In our demo, we are taking advantage of the HLS.js player. With such a tool onboard, the creation of the player is simple as that: lib/rtmp_to_hls_web/templates/page/index.html.heex

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <div class="container"> <video id="player" controls autoplay class="Player"></video> </div> <script> var video = document.getElementById('player'); var videoSrc = window.location.origin + `/video/index.m3u8`; if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(videoSrc); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoSrc; } </script>

First, we load a hls.js script. Then, in the DOM we add a div holding a video element of a class Player. Finally, we add our custom script, which decorates the video player element with the functionalities provided by the hls.js library. The videoSrc is a URL of the manifest file of the HLS playlist. As described in the previous chapter, the files from the playlist are available at /video/<filename>. If the HLS is supported by the client's browser, we create an object of type Hls (that class is a part of the hls.js library), then we set its source manifest file and a DOM element that acts as a video player. For more options that can be specified for the player, see the documentation.

Next chapter
RTSP to HLS introduction
Next Chapter