Bug: On-Demand video treated as live on Safari with Media Chrome

[jakubslambor]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video

Which browsers are you using?

Safari

Which operating systems are you using?

macOS

Description

When using <mux-video> in conjunction with Media Chrome, since version v0.16.5, when you try to play a HLS (.m3u8) video in macOS/iOS Safari, it treats it as mediastreamtype="live" on the Media Chrome <media-controller>. This causes the video to start from the beginning on every play/pause, and other weird behavior:

https://github.com/muxinc/elements/assets/63538910/517172bf-96f6-4369-9c71-dddffb049f7d

versions <0.16.5 (0.16.4) and non-hsl streams work fine

https://www.media-chrome.org/docs/en/stream-type

Reduced test case

https://codesandbox.io/p/devbox/media-stream-type-qmjqmn?file=%2Fsrc%2FApp.vue

Steps to reproduce

reproduction sandbox is provided; remember to use Safari where this issue is present

Current Behavior

<media-controller> is mediastreamtype="live", which is incorrect

Expected Behavior

<media-controller> is mediastreamtype="on-demand"

Errors

No response

What version of the package are you using?

^0.16.5

[dylanjha]

Thanks @jakubslambor for the code sandbox, that's very helpful.

I noticed with <mux-video> you're using the src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" ...

Although that should work, the API for using <mux-video> is with videos hosted by Mux Video, and you initialize it with playback-id for example <mux-video playback-id="fujsyrk0014ec2lpnm11bzc2maysaqpqa"></mux-video>. Setting arbitrary src= is not something we test or guarantee support for with <mux-video>.

(Incidentally, the URL you used is hosted by mux.dev, but that's a test stream that we happen to host for Hls.js demo purposes, and it isn't hosted by our "normal" Mux Video hosting product.)

This is still probably a bug that we should look into, but to get unblocked I think you have 2 options here:

1. If your video is a Mux Asset, use <mux-video playback-id="{PLAYBACK_ID}">
2. If your video is not a Mux Asset use <video> or use <hls-video>: https://github.com/muxinc/hls-video-element

Would either of those be possible for you to try?

[jakubslambor]

@dylanjha Oh cool, I didn't know about hls-video-element, I'll give that a shot! Thanks 🙏

Keeping open (This is still probably a bug that we should look into), proceed at your discretion