YT with vidstack, incorrect data-ended state, video only playing sound
Current Behavior:
Following the setup guide from the docs, when playing youtube videos (in my test is youtube livestream), player sometimes got stuck on load, or only playing the audio.
Basically, when I autoplay, or click the player, it will instead show "refresh" button and the video will play for like 1s before going dark with huge refresh icon, or stuck on one image but show refresh icon. The time displayed also behave strangely, sometimes it will go down instead of up, or it will changes rapidly as if I speed up the video.
On cases where only audio is playing, it seems that data-ended got appended to the player incorrectly, causing .vds-blocker to overlay the player and hide the actual video behind it. If I hide the vds-blocker, the video is actually playing.
Tracking through the subscribed state, vidstack doesn't seem to be throwing any error or caught any issue.
In comparison, using direct embed code from youtube, the same video plays without issue.
I also noticed that the player does not support youtube /live/:id link.
Expected Behavior:
It should play without issue.
Steps To Reproduce:
- Run the project, or use the vercel deployment to test.
- Copy-paste any youtube live url to the provided input and click "Change URL".
- For the player labelled "Javascript" and "Web Component", the player will behave strangely, while "Embed Code" will play just fine.
Reproduction Link:
Environment:
"vidstack": "^1.12.13" "vue": "^3.5.22" "vite": "^7.1.9"
Anything Else?
Repro deployed in vercel: https://vidstack-test-rho.vercel.app/