Video streaming CDNs

Newbie to Video streaming here …

Our Tumult pages include large videos (200MB - 600MB). We find that on slower machines, it takes a long time (more than 3 minutes) to load and even on normal machines, it often takes 10 seconds or more. We are looking for the best way to host our videos to manage this barrier to a high quality web experience.

Questions:

  • Are we right to look at solutions like CloudFlare or JSDeivr as hosting options to address this problem?
  • Will these services present videos to different devices at different pixel levels depending on the user’s bandwidth?
  • Between these 2, is it safe to assume that JSDelivr is better since that is the “official” Hype CDN?

Any other angles we should be exploring other than CDNs to better serve videos?

Thank you in advance!

HappyHyper

Video hosting/streaming is generally very expensive since video files are large (this takes up both cache space on the network and transfer costs). Cloudflare has a specific product for video:

I don’t think jsDelivr is appropriate since their target is, as their name implies, for javascript hosting.

Other options could be akamai or amazon cloudfront.

But if you can, I would just use youtube or vimeo! Not only is hosting free, but they come with players that do a lot of the work to make sure variable quality versions are fetched depending on connection speed.

On tumult.com we use youtube.com, but as a backup (for china or folks who want to download) do host our own videos and then use cloudfront as a CDN for them. Our site more generally uses cloudflare.

Thanks Jonathan…

Just wondering whether any of these links offers a different perspective on whether JSDelivr can be of help in this area …?
// https://www.jsdelivr.com/package/npm/@videojs/http-streaming
// https://www.jsdelivr.com/package/npm/video-stream-merger

I really like the idea of using Youtube – would make everything much simpler. To that end:

  • Would we be able to control pause and play for these players through JavaScript in the same way that we control it for the Tumult player?
  • We have spent a lot of time fine-tuning our use case with the Tumult player as our tool. What would be the key differences in the way we manage a YouTube player versus the Tumult player?
  • Would it be possible to use YouTube or Vimeo without having any of their branding show up in the player?

Thanks in advance for helping figure this out.

HappyHyper

Just wanted to chime in that Cloudflare does cache videos, so unless youre videos are each extremely large and you’re doing huge amounts of traffic, you should be able to leverage a lot of their service to stream videos. It’s kind of a case-by-case basic:

You would just set your page rules to cache ‘everything’: https://support.cloudflare.com/hc/en-us/articles/218411427

What is the average size of your videos? You might also want to run some scenarios based on your current bandwidth and visits to determine how much your current host would charge you to host your videos.

There are APIs for Youtube and Vimeo – there’s examples here, but it’s not as straightforward as the regular video API that every browser knows (which Hype exposes through its normal video embed system).

The API is pretty extensive: Youtube Play Pause API function

But there are also helper scripts which expose additional functionality like Mediaelement JS. They have some baked-in support for Youtube: https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md

While playing – ‘Youtube’ would be hidden. On hover, it is not hidden. For example, on our site, it appears like this on hover:

But it’s just the content during playback.

Those just look like hosted javascript projects, which so happen to help with streaming playback but are unrelated to the jsdelivr service. Looking at their restrictions page, it appears they won’t serve anything over 50 MB, which would include most videos.