I've searched here and found some very old answers but I think this question has not been answered. I'm using the MediaCloud plugin in Wordpress to display videos. When I create a page, I can use a short tag to display a video by including this in my HTML markup:
<div> [mux_video id='2926' autoplay='false' loop='false' muted='false' controls='true' inline='false' preload='metadata'] </div> Wordpress will query an internal db for media id=2926 and ends up rendering this HTML markup to display the video (url changed for privacy):
<div> <figure> <video class='mux-player video-js' width=1920 height=1080 poster=' controls preload='metadata'> <source src=' type='application/x-mpegURL' /> </video> </figure> </div> My configuration of MediaCloud uses videojs to display the video but I've been unable to locate any useful function in the docs which can tell me if the video in question is a livestream or some previously broadcast live stream or uploaded video with a fixed duration (presumably progressive download?). It seems clear that the JS running in the page can tell the difference because a livestream clearly has the LIVE indicator visible and the timeline indicator/scrubber removed whereas an old video will have the timeline indicator/scrubber and displays the fixed length of the video.
I thought at first that I might sniff for the Program Data Time (PDT) and this might be absent for pre-recorded content, but MUX also provides PDT for old livestreams. This code will output the PDT for the currently running video but cannot be used to distinguish livestream from old videos:
const video1 = document.querySelector("#my_video video"); let player1 = videojs(video1); window.player1 = player1; player1.on('loadeddata', () => { let metadataTrack = Array.prototype.find.call(player1.textTracks(), track => track.label === 'segment-metadata'); metadataTrack.on('cuechange', () => { let pdt = metadataTrack.activeCues[0].value.dateTimeString; document.getElementById('pdt_1').innerHTML = pdt; }); }); I also tried checking for the video's duration to see if that might help me distinguish -- was thinking a livestream might have some empty value for duration but that's not the case. So far, it always shows me some positive integer value when I do this:
video1.addEventListener('loadedmetadata', (event) => { // duration and dimensions of video are now known let dur = Math.round(video1.duration); console.log(dur) }); Is there some simple JS that I can use to return a true/false value indicating whether the video in question is a livestream or whether it's an old video of fixed duration? Someone suggested querying the MUX API but that's not going to work for me in this case and would gum up my page load times.
1 Answer
player.duration() is Infinity for live streams. The live indicator checks that on durationchange events.
