Iframe does not load subtitles in videos

[adrfelipe]

Let's start with the first problem... We have courses with jquery tabbed navigation, these tabs were causing the iframe with the videos to not load and we needed another way to show the videos without losing the tabbed navigation.

We found a solution! Create an html file, upload it to the files inside the instance and place it inside another iframe. Exactly, an iframe that loads inside another iframe. The problem is that the videos in Studio loaded subtitles and this player did not.

<video id="my-video" class="video-js vjs-theme-sea" controls preload="auto" width="720"

        height="420" data-setup="{}">

        <source

            src="awsvideolink.mp4"

            type="video/mp4" />

        <track kind="subtitles"

            src="awssubtitlelink.vtt"

            srclang="pt" label="Português">

    </video>

We have all the subtitles VTT files but because it is an iframe inside another, we do not have direct access to the instance because it is private. We uploaded the videos to Amazon AWS S3 and used them to put the videos on the platform. But when we put the subtitle files through the AWS link, the subtitle does not load, the request works by returning Code 200 but the object comes with no response

I need a solution to be able to load subtitles from an external host because I can't load the instance files inside the iframe that has the video.

[James]

@adrfelipe 

Let me start with I don't have an answer and this is just me thinking out loud.

When I read through this, it sounds very twisted and that you might have made a wrong turn, but because you keep on making small steps forward, you keep on that path instead of going back to the original problem and trying a different path. I teach calculus and one of the things that's important to learn is to know when to give up and try something else.

Loading an iframe in an iframe? Does that really sound like what you want to do? Aside from the videos, how does that affect keyboard navigation? Do the subtitles load if the HTML page you upload to Canvas doesn't contain an iframe?

Maybe my concern is because I've always frowned upon uploading HTML files into the course files and then trying to embed them. In 2018-2019, Canvas developed a security policy to address some concerns with doing this.

Uploading HTML files directly to Canvas may work, but those files really belong on a different server where you have full control over the headers delivered. If you're relying on some behavior that happens because the file is loaded from within Canvas, then that's probably not the best approach. Since iframes are sandboxed from their parent to restrict access, it sounds like you might be relying on some  undefined / undocumented behavior. Can you get the files to work if you upload them to a different server?

What is it about the tabbed jQuery navigation that is keeping it from working? This is where it all started to go wrong. Maybe there's something you could do differently at the beginning to make the rest of it work.

Again, I don't have a solution (I use Canvas Studio but don't use tabbed navigation because of other problems it presents), but this just feels like the wrong approach to take.

[adrfelipe]

You thinking alota made me rethink about some things... But I will point out some things that are important to understand decision making:

In my environment we do not use Studio because it is charged per user and as the user base only grows more and more, it is very expensive to maintain a value per user.

1. Why an iframe inside another ?

We have all the videos of the courses inside a model course, before we loaded them through an iframe that used the native Canvas player, which was able to load the subtitles. When we changed course navigation to tabbed navigation, the videos load when they want so we needed the solution so that the videos always load, without taking away the tabbed navigation.

It is not feasible to change the navigation by tabs because there are more than 25 courses with this type of navigation, changing would be to change the entire structure of more than 25 courses. The decision for an iframe that loads an HTML that has another iframe inside, is because Canvas doesn't interpret some video tags and doesn't have support for javascript video players and also because using the video tag, leaving aside the native player of Canvas, videos load smoothly even with tabbed browsing.

The decision seemed simple, videos would work that way and tabbed browsing would continue. The problem is that AWS S3 can't send the vtt file with subtitles in a way that the HTML understands, leaving the video completely without subtitles.

I find myself in this icognita, keep the navigation by tabs and use the iframe method loading an HTML file, but the player would not be able to load subtitles. Or keep the videos in the standard way, changing the structure, taking away the tabbed navigation. This post is to ask: Is there another way to make an iframe that loads an HTML file be able to read the subtitles on some server? By Amazon AWS S3 I can't display them in the video player

[James]

@adrfelipe 

Your first message mentioned Studio. Which Studio did you mean if not Canvas Studio?

I'm not sure why you have the videos in a model course or what that means exactly. It seems that you are saying that your videos are on AWS. If that's the case, then what is it that you're really loading in the iframe? Why can that not be served from a regular web server -- why does it have to come from Canvas? You can load JavaScript and support your own player when you serve it from a regular (not-Canvas) web server. That's how iframes are intended to work with Canvas -- you supply all the JavaScript and CSS needed when you serve the page. Loading files from within the Canvas file system is a hack some people have employed and Canvas can be set to block JavaScript contained in those files as a security hazard. Loading them from a non-Canvas web server bypasses all that and gives you full control within the confines of a sandboxed iframe.

With regards to the tabbed navigation, I was asking what is it about the tabbed navigation that makes it not work correctly? I was reading something last week about Chrome not rendering things that are not displayed until they are displayed. That sounds like it should still load once you're switched to the tab.

You may wish someone would tell you how to support VTT with an iframe within an iframe, but I still feel like you're focused on the wrong thing. I feel like you're saying I got A to do B and then B to do C and I can get C to do D, but I cannot figure out how to get D to do E, but the whole time you could have A do E directly if you took a different route.

[jerry_nguyen]

@adrfelipe 

Is this how your course looks like?