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.