search

vlitejs / vlite

🦋 vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)
https://vlite.js.org
MIT License
268 stars 18 forks source link

HLS.JS integration #55

Closed bcorvino closed 3 years ago

bcorvino commented 3 years ago

Description

I'm working on replacing our videojs implementation with vlitejs. It's going very well, except vlite doesn't seem to have built in hls support. I'm working around this by detecting playable media types in the browser and working around it, but am wondering how best to integrate hls.js with vlite. Would it be as a new Provider, akin to HTML5? Or some other method?

Of course, I would be happy to contribute the hls provider to the open-source project.

Let me know your thoughts and thanks for the work you've done on vlite!

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue. 1. 2. 3.

Results

Expected

Please describe what you expected to see.

Actual

Please describe what actually happened.

Error output

If there are any errors at all, please include them here.

Additional information

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

versions

vlitejs

What version of vlitejs does this occur with?

Browsers

What browser are affected?

OS

What platforms (operating systems and devices) are affected?

yoriiis commented 3 years ago

Hi @bcorvino,

Thanks for the note. After some tests, the HLS.js integration works according to the basic usage on the official documentation.

I created an example with Vlite.js on JSFiddle. If that's okay with you, I'll update the README with a new streaming section.

bcorvino commented 3 years ago

Thanks, Yoriiis, I'll take a look! To be honest, I'm on the fence about hls vs testing for what is playable in the browser because of the size of the hls.js library. I've been so happy with vlite.js because of it's footprint.

yoriiis commented 3 years ago

Thanks @bcorvino, happy to have happy users 🎉

I agree with you, the size of the HLS.js library is huge, unlike what Vlite.js offers. I'm not sure how streaming works, but HLS.js has the merit of being turnkey for those who really need it.

bcorvino commented 3 years ago

I'm thinking for me, personally, it's going to come down to content length. For short form content (< 5 mins), I think the bandwidth savings of hls streaming vs mp4 download will be negligible (hls downloads 5 second segments as the user watches, while mp4 just eagerly tries to download the whole file). But when you get up to about 15 minutes or so, it's likely worth it to load the 100k for hls functionality to save downloading the multiple MB of video that the user may never watch.

yoriiis commented 3 years ago

I added a streaming section in the README and an example in the associated directory.