Help needed: Test your skills: Multimedia and embedding 2

Hello! This exercice asks me to add subtitles to my video, but I get the following error:
Security Error: Content at file:///Z:/projets-web/examples-mdn/mediaembed2/mediaembed2-download.html may not load data from file:///Z:/projets-web/examples-mdn/mediaembed2/subtitles_en.vtt.

Here’s my code: https://codepen.io/philou-felin/pen/jOrRdMG. (Somewhat modified because I never used CodePen before and I had to move CSS.

What could cause the error? Any idea?

Hello @philou

first the video location are in the media folder so the src should be

src="media/video.webm"

same thing for mp4 file and the subtitle if you make those change it will work on the online editor on that page
it recommened also to you label for the subtitle so the user use it to navigate between many subtitles

do you get that error while you try the code locally on your computer ? if yes then that do the security setting that require the html and video and subtitle to be on same origion so put them next to each other and it would work

hope that help and have a nice day :slight_smile:

I cheated. :stuck_out_tongue: I put the files in root.

Oh! I’ll have to try that!

Hm… I’m not sure the tutorial taught me how to do that. I’ll need to investigate…

Yes.

Hm… I’m confused. I’ll have to look at this…
Thanks!!!

Microsoft Edge (Chromium) gave me a better error message

Unsafe attempt to load URL file:///C:/Users/***/Desktop/mediaembed2/subtitles_en.vtt from frame with URL file:///C:/Users/***/Desktop/mediaembed2/mediaembed2-download.html. ‘file:’ URLs are treated as unique security origins.

Maybe I should set my local web server. I guess that would fix this problem. Would it? I have a QNAP, which I could use… And a mid-tower I was planning to install BlueOnyx on, just for testing…

check the label atterbuite
just add label=“english” for the subtitle

check this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

that the issue that both the video and subtitle be on same server

yep try to install local web server it would help

and let me know if i can help with anything and have a nice day :slight_smile:

Everything is fixed now. The error disappeared and subtitles are working. I used my QNAP to host (offline, I think :sweat_smile:) the exercise.

I added the label as you suggested and I even added it to Video and audio content. :grin: (EDIT: I also added an extra step in the Test #2.)

Thanks!

well done @philou
but the way your work on online editor in mdn pages can not be shared by sharing the link

congratulations and have a nice day :slight_smile:

Hm… I’m think there’s a misunderstanding. I’m not trying share my exercises from the embedded online editor. In fact, I’m planning to do everything locally, in seperate files.

oh sorry for misunderstand you and well done and have a nice day :slight_smile: