search

shiyiya / oplayer

:zap: Another HTM5 video player.
https://oplayer.vercel.app
MIT License
147 stars 19 forks source link

HLS quality selection #18

Closed nadecancode closed 2 years ago

nadecancode commented 2 years ago

Is it possible to implement HLS quality selection similar to how Artplayer did it in https://github.com/zhw2590582/ArtPlayer/issues/253#issuecomment-1108458428

shiyiya commented 2 years ago

79cfe36419c4b9742b475e6c4c914ecaff293f62

shiyiya commented 2 years ago

Done ✅

nadecancode commented 2 years ago

Done ✅

Thank you, mind publishing a release?

shiyiya commented 2 years ago

v1.0.31

nadecancode commented 2 years ago

@shiyiya Looks like the quality selection is still rather off. Only "Auto" is available even it's not supposed to since m3u8 has multiple qualities image

shiyiya commented 2 years ago

provide url

nadecancode commented 2 years ago

provide url

https://api.enime.moe/source/cl7qfww5c000c2gpk1l857zat for primary https://api.enime.moe/source/cl7qfwwbp000d2gpk1dtv15nd for backup

phpb-com commented 2 years ago

Yes, just tested with my stream, and only can see auto available.

shiyiya commented 2 years ago

image

https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

shiyiya commented 2 years ago

Try running your url on the official hlsjs demo to see if level is supported

nadecancode commented 2 years ago

Try running your url on the official hlsjs demo to see if level is supported

image

Looks like they are supported. I could properly get all the levels with example provided in https://github.com/zhw2590582/ArtPlayer/issues/253#issuecomment-1108458428

phpb-com commented 2 years ago

My videos all work with the official hls.js as well. Also, it seems that when I just go to the URL with the video via link on the site, the quality menu does not appear. If I refresh the page, it appears but only 'auto' is available. If I dump parsed manifest data rates, I get the full list.

phpb-com commented 2 years ago

Testing https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 on my site (just replacing the video URL, shows the quality levels, but the same problem with no quality menu if not refreshed. This is with Remix SSR code.

shiyiya commented 2 years ago

Close this issue if it meets expectations

shiyiya commented 2 years ago

Testing https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 on my site (just replacing the video URL, shows the quality levels, but the same problem with no quality menu if not refreshed. This is with Remix SSR code.

Latest submission not yet released.

shiyiya commented 2 years ago

Run the latest (unreleased) code according to this.

nadecancode commented 2 years ago

Yes with this test url it does have levels. with 1.0.31 it also shows levels but I don't know if the URL I provided has anything more than Auto

shiyiya commented 2 years ago

Yes with this test url it does have levels. with 1.0.31 it also shows levels but I don't know if the URL I provided has anything more than Auto

I tested your url on the latest code and works as expected

nadecancode commented 2 years ago

Yes with this test url it does have levels. with 1.0.31 it also shows levels but I don't know if the URL I provided has anything more than Auto

I tested your url on the latest code and works as expected

Yes, just ran locally and it does have levels now.

shiyiya commented 2 years ago

https://github.com/shiyiya/oplayer/commit/58fe2a4030aea8e224e43048b4679fbd6bdde91e#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33

Which one should I use as the name of the option if I don't have a name? This doesn't seem to be the right one at the moment？

nadecancode commented 2 years ago

58fe2a4#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33

Which one should I use as the name of the option if I don't have a name? This doesn't seem to be the right one at the moment？

It level name doesn't exist it's auto I think

shiyiya commented 2 years ago

I need to go work on something else, PR welcome.

nadecancode commented 2 years ago

I need to go work on something else, PR welcome.

Alright

phpb-com commented 2 years ago

tested with standalone player from the main, and it seems to work. Thanks.

nadecancode commented 2 years ago

I need to go work on something else, PR welcome.

Alright

Can you publish a release

shiyiya commented 2 years ago

58fe2a4#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33 Which one should I use as the name of the option if I don't have a name? This doesn't seem to be the right one at the moment？

It level name doesn't exist it's auto I think

I tested the url you provided, all levels have no names, there should not be so many auto

nadecancode commented 2 years ago

58fe2a4#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33 Which one should I use as the name of the option if I don't have a name? This doesn't seem to be the right one at the moment？

It level name doesn't exist it's auto I think

I tested the url you provided, all levels have no names, there should not be so many auto

I tested my URL locally and they're displaying levels fine

nadecancode commented 2 years ago

image

Don't mind the danmku stuff I only changed src

shiyiya commented 2 years ago

https://github.com/shiyiya/oplayer/commit/58fe2a4030aea8e224e43048b4679fbd6bdde91e#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33

But the name may be wrong, check this commit

nadecancode commented 2 years ago

58fe2a4#diff-873ea15f9df2b309f4d8078f1e958bfd9ec7fd708e354b50eee44121001b506dR33

But the name may be wrong, check this commit

I think only height should be considered so if height is -1 it's auto and for everything else just use height + P

shiyiya commented 2 years ago

it used height fallback, is right？

nadecancode commented 2 years ago

it used height fallback, is right？

height is always present unless auto (-1)

shiyiya commented 2 years ago

if is 9/16 ?

nadecancode commented 2 years ago

if is 9/16 ?

What do you mean if is 9/16

shiyiya commented 2 years ago

Like the video on tiktok, the height is bigger than the width?

Or maybe the height is not the height of the video, but something else

phpb-com commented 2 years ago

I checked the commit, and I think you nailed it. When the name is not provided (which is common for any hls manifested created by ffmpeg, bento4, etc, you used height (e.g., 360, 540, 720, etc) and append 'P'. I would go with the small 'p' since this seems to be a normal convention.

nadecancode commented 2 years ago

Like the video on tiktok, the height is bigger than the width?

Or maybe the height is not the height of the video, but something else

height is not the height of video, but rather resolution. hls.js named it differently

shiyiya commented 2 years ago

@phpb-com ok, p @NADESHIKON 👍

I will release new version.

phpb-com commented 2 years ago

btw, it seems like you stopped tagging the code since 1.0.29, is that intentional?

shiyiya commented 2 years ago

Create tags whenever you want. I'll create them all at once when I have time.

phpb-com commented 2 years ago

Potentially found one issue with video not starting unless quality level is selected. This manifest did not load on the latest 'main' standalone player:

#EXTM3U
# Created with Bento4 mp4-dash.py, VERSION=2.0.0-639
#
#EXT-X-VERSION:6

# Media Playlists

# Audio
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="en",NAME="English",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="audio/en/mp4a.40.2/playlist.m3u8"

# Video
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=2044501,BANDWIDTH=3790751,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=1920x1080,FRAME-RATE=23.976
video/avc1/1/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=3150649,BANDWIDTH=6084891,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=2560x1440,FRAME-RATE=23.976
video/avc1/2/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=6389726,BANDWIDTH=12514105,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=3840x2160,FRAME-RATE=23.976
video/avc1/3/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=465833,BANDWIDTH=693507,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=640x360,FRAME-RATE=23.976
video/avc1/4/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=657292,BANDWIDTH=1045619,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=852x480,FRAME-RATE=23.976
video/avc1/5/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=757477,BANDWIDTH=1241242,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=960x540,FRAME-RATE=23.976
video/avc1/6/playlist.m3u8
#EXT-X-STREAM-INF:AUDIO="audio",AVERAGE-BANDWIDTH=1115680,BANDWIDTH=1945022,CODECS="avc1.640029,mp4a.40.2",RESOLUTION=1280x720,FRAME-RATE=23.976
video/avc1/7/playlist.m3u8

# I-Frame Playlists
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=81235,BANDWIDTH=159186,CODECS="avc1.640029",RESOLUTION=1920x1080,URI="video/avc1/1/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=113634,BANDWIDTH=218379,CODECS="avc1.640029",RESOLUTION=2560x1440,URI="video/avc1/2/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=187642,BANDWIDTH=346985,CODECS="avc1.640029",RESOLUTION=3840x2160,URI="video/avc1/3/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=20587,BANDWIDTH=40616,CODECS="avc1.640029",RESOLUTION=640x360,URI="video/avc1/4/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=30004,BANDWIDTH=60123,CODECS="avc1.640029",RESOLUTION=852x480,URI="video/avc1/5/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=34675,BANDWIDTH=69543,CODECS="avc1.640029",RESOLUTION=960x540,URI="video/avc1/6/iframes.m3u8"
#EXT-X-I-FRAME-STREAM-INF:AVERAGE-BANDWIDTH=49647,BANDWIDTH=99137,CODECS="avc1.640029",RESOLUTION=1280x720,URI="video/avc1/7/iframes.m3u8"
phpb-com commented 2 years ago

Some output from debug window:

==> hlsFragParsed
==> hlsLevelPtsUpdated
==> hlsFragParsingUserdata
==> hlsFragParsingUserdata
==> hlsBufferAppending
==> hlsInitPtsFound
==> hlsFragParsingInitSegment
==> hlsBufferAppending
==> hlsBufferCodecs
==> hlsFragLoaded
==> hlsFragBuffered
==> hlsFragLoading
==> hlsLevelLoaded
==> hlsFragLoading
==> hlsLevelUpdated
==> hlsLevelLoaded
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsLevelUpdated
==> hlsLevelLoaded
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsLevelUpdated
==> hlsLevelLoaded
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsLevelUpdated
==> hlsLevelLoaded
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsLevelUpdated
==> hlsFragBuffered
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsLevelLoaded
==> hlsFragLoading
==> hlsLevelUpdated
==> hlsLevelLoading
==> hlsLevelSwitching
==> hlsFragLoaded
==> durationchange: 202.20194999999998
==> hlsLevelLoaded
==> hlsFragLoading
==> hlsLevelUpdated
==> hlsManifestLoaded
==> hlsLevelLoading
==> hlsLevelSwitching
==> addsetting
==> hlsBufferFlushing
==> removesetting
==> hlsManifestParsed
==> addsetting
==> hlsBufferFlushing
==> removesetting
==> hlsMediaAttached
==> loadstart
==> timeupdate
==> emptied
==> abort
shiyiya commented 2 years ago

need m3u8 http url @phpb-com

shiyiya commented 2 years ago

it used height fallback, is right？

height is always present unless auto (-1)

got zero? https://test-streams.mux.dev/x36xhzz/url_0/193039199_mp4_h264_aac_hd_7.m3u8 image

nadecancode commented 2 years ago

it used height fallback, is right？

height is always present unless auto (-1)

got zero? https://test-streams.mux.dev/x36xhzz/url_0/193039199_mp4_h264_aac_hd_7.m3u8 image

0 is probably a mistake by whoever made this m3u8, since the height is more like creator-defined

nadecancode commented 2 years ago

it used height fallback, is right？

height is always present unless auto (-1)

got zero? https://test-streams.mux.dev/x36xhzz/url_0/193039199_mp4_h264_aac_hd_7.m3u8 image

0 is probably a mistake by whoever made this m3u8, since the height is more like creator-defined

You can probably only show "Auto" if there is only one level available, since auto or not it doesn't even matter

phpb-com commented 2 years ago

@shiyiya try this URL https://cdn.fshck.com/HAH/playlist.m3u8

phpb-com commented 2 years ago

And 'canplaythrough' event stopped firing as well, with that URL

shiyiya commented 2 years ago

@shiyiya try this URL https://cdn.fshck.com/HAH/playlist.m3u8

net::ERR_CONNECTION_REFUSED

phpb-com commented 2 years ago

https://hls-js.netlify.app/demo/?src=https%3A%2F%2Fcdn.fshck.com%2FHAH%2Fplaylist.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ== works here though