Search code examples
javascriptjsonamazon-web-servicesjwplayer

Converting file into JSON using JWPlayer

Hey guys so I have this problem placing in captions into my video.

I'm placing my .vtt as a value inside my object but it seems like the browser doesn't like the way it was output. I'm following this guide here

This is the Error that pops up on my console

    {name: "", message: "Converting circular structure to JSON", error: TypeError: Converting circular structure to JSON at Object.stringify (native) at Object.<ano…}

captions-en.vtt

00:00:01.000 --> 00:00:15.000
What brings you to the land
of the gatekeepers?

00:00:15.500 --> 00:00:20.500
I'm searching for someone.

00:00:36.500 --> 00:00:39.000
A dangerous quest for a lone hunter.

00:00:41.500 --> 00:00:44.000
I've been alone for as long
as I can remember.

Javascript

jwplayer("my-video").setup({
    file: "<my-video-file>",
    width: "100%",
    aspectratio: "24:10",
    primary: "flash",
    tracks: [{
        file: "/assets/captions/captions-en.vtt",
        label: "English",
        kind: "captions"
    }]
});

I also made sure I saved as "UTF-8" encoding.

Is there another step I'm missing. Like a parse method?

Also note that I'm streaming the video from AWS S3 Bucket. Would that be the reason causing the error that I would have to upload the vtt file on there?

The error is the same in this post but they showed how they did it by placing in a string. How would I go about it if it came from a vtt file?

Solution

  • Also note that I'm streaming the video from AWS S3 Bucket. Would that be the reason causing the error that I would have to upload the vtt file on there?

    Yes, upload the VTT file wherever your video happens to be. There are security restrictions on VTTs and in my own experience, I have yet to successfully run JWPlayer using a VTT that's in a different bucket than the video.

    Make sure you check the VTT file is valid by running it at https://quuz.org/webvtt/

    S3 might treat your VTT generically by defaulting it's content-type as application/octet-stream. I'm not sure how you are using S3, but if you can check the VTT's properties after it's uploaded, look for this property:

    Content-Type: binary/octet-stream

    If you see that, then you need to change it to this:

    Content-Type: text/vtt

    If you don't have an established process and/or tools to check the VTT on S3, use the freeware version of S3 Browser or Cloudberry S3 Explorer.

    About that error:

    {name: "", message: "Converting circular structure to JSON", error: TypeError: Converting circular structure to JSON at Object.stringify (native) at Object.<ano…}

    I don't think it's the VTT file is what that error's about. If you look at it's formatting, VTT has no similarities to a JSON whatsoever, but the structure of a JW setup syntax is very similar.