Can't play .m3u8 in blazor-server app

aviabunin commented 9 months ago

Please do not delete the template, by filling out the required information we can investigate your issue more quickly.

Before opening an issue see if your problem can be resolved with the troubleshooting guide.

Description

Briefly describe the issue. Include a reduced test case, we have a starter template on JSBin you can use.

Sources

All sources is here

https://stackoverflow.com/questions/77878661/in-asp-net-core-not-playing-hls

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

In _host.cshtl I use next code:

<link  href="~/js/video-js.css" rel="stylesheet" />
<script src="~/js/video.min.js"></script>
<script src="~/js/videojs-http-streaming.js"></script>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script>
    document.addEventListener('DOMContentLoaded', function () {         
       var player = videojs('my-video');
        player.play();
 }
);
</script>

And in Index.razor:

<video id="my-video"  controls   
 muted="muted"
 autoplay="autoplay">  
 <source src=@videoSrc type="application/x-mpegURL"  />
 Your browser does not support the video tag
</video>  
<button id="button"></button>

@code{ string videoSrc = "http://localhost:5293/3D/test.m3u8";
}

test.m3u8 and *.ts are in the wwwroot/3D folder (to avoid CORS problems) and are playing in VLC without problem

Results

   Sometimes the first frame appears and then disappears, sometimes  errormessage appears:

Expected

Video is playing as in demo "https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=true&fluid=false&minified=false&sync-workers=false&liveui=false&llhls=true&url=https%3A%2F%2Fdagalvaomediaaccount-uswc.streaming.media.azure.net%2F72a9e630-9517-46dc-a07a-2445b9a01fcb%2F6f7b1218-01dd-429e-9eee-30a21b4b4de6.ism%2Fmanifest(format%3Dm3u8-cmaf%2Cencryption%3Dcbc).m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&dts-offset=false&override-native=true&preload=auto&mirror-source=true&forced-subtitles=false" wich is playing on google chrome and Edge.

Error output

DOMException: The play() request was interrupted because the media was removed from the document.

Additional Information

Please include any additional information necessary here. Including the following:

videojs-http-streaming version

video-http-streaming 3.9.1 videojs-http-streaming x.y.z

videojs version

video.js 8.9.0 video.js x.y.z

Browsers

Chrome, Firefox, Edge *

Platforms

windows server 2008R2 *

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below. *

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below. *

What can I try to solve the problem?

welcome[bot] commented 9 months ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

mister-ben commented 9 months ago

The error message is saying the video element has been removed. Something external to Video.js or VHS must be doing that. I don't know anything about blazor, but wonder if it's something similar to React's shenanigans with doing a mount-unmount-mount in quick succession in its strict mode.

videojs / http-streaming