Stream service - subtitles and custom image?

Using the Stream service is there any way to add subtitles in WebVTT format to the videos?

Also, is there a way to set a placeholder image or the time in the video as the first frame before the video is played?

1 Like

Currently you can’t separately upload subtitles.

As for the image, you can add the poster attribute to the stream tag with an URL to the image you want to use.

See the Player API docs:

Thanks martin2.

Do you have a link to any documentation so I can see what else other than poster attribute there is.

Is there a way to include subtitles separately, outside of the Stream system to the video?

+1 to support external subtitles

I am ok using the generate image in the embed code, but it is creating a PNG that is HUGE and not even compressed. I ran it through tinypng and without even resizing it saved 71% off the generated image.

So I am thinking for a company all about speed to have such a slow image, I must be doing something wrong. Or is it basically required to upload my own optimized poster for each video?

Is there any plan to add support for external subtitles?

This is a blocker for us too.

For anyone that’s interested, here’s a basic working demo (with code / comments) that enables WebVTT subtitles in the Cloudflare player:
https://codepen.io/theprojectsomething/pen/zyRjvd

Couple of caveats, but fairly straight-forward to implement. Would be much easier if the player were open sourced and/or <track> was officially supported.

3 Likes

Not sure if this is a recent update, but the <track> element appears to be working (see updated demo above).

There’s no icon, so CC is on by default and track selection isn’t available (and thus no multi-language support) but it works well - seemingly with a native implementation in Safari and a custom implementation across Chrome and Firefox, with fallback to Mozilla’s webvtt library where required.

This is definitely enough for our immediate needs. Happy days.

3 Likes

@som1 thank you for taking the time to share your solution! Outside of it just being the right thing to do, i.e. having subtitles available, it is also becoming a must for businesses in the USA to avoid Nuisance Lawsuits concerning the ADA.

I strongly believe Cloudflare should update its Stream service to make it easier for it’s user base to add subtitles.

It would be great if we could implement multi-language as we need to support six languages on our site. The lack of support is a bit of a blocker as it stands.

Hi Ben,

Following on from the solution above, we have since moved to using a native HTML5 video element with a HLS extension (hls.js) in place to provide streaming support in all modern browsers, including IE11+

There are a bunch of players out there that offer similar capabilities (including the Stream player), but we opted for close-to-chrome with minimal overhead. A good, full featured alternative would be something like video.js.

To get the correct url for streaming we parse the stream url, available through the web interface, and then pass that to our player:

// use a simple regex to pull out the video id, alternatively you could just use the id directly
const getSrc = (stream) => {
  const re = /^(?:https:\/\/watch\.Cloudflarestream\.com\/)?([a-z0-9]{32,})$/i;
  const id = (stream.match(re) || [])[1]; // check there was a match
  return id && `https://videodelivery.net/${id}/manifest/video.m3u8`; // map to CF cdn location
}

const exampleStreamUrls = [
  'https://watch.Cloudflarestream.com/c560e9dfcea9255b1a6228b0b04468e0',
  'c560e9dfcea9255b1a6228b0b04468e0',
];
const srcList = exampleStreamUrls.map(url => getSrc(url));
console.log(srcList);

Happy to provide more info if you need it.

Cheers, Som.

1 Like

How long have you been taking this approach? I’m curious about how billing works with this vs the CF player (I believe the CF player reported to /cdn-cgi/... to report watch time, but I may have wrong/outdated memory).

Hi Judge, we’ve had this in place since mid march and have since been billed for considerable watch time. Can safely assume it’s metered elsewhere. Cheers!

1 Like