Yesterday I started working with HTML5 Autoplay and also adding HTML5 Tag aka Subtitles.
I am having trouble to understand why when I am playing a sample of an *.mp4 video it can display the subtitles through the relative path (file:///Users/user/Desktop/test.html) but if I execute the file through the Pycharm for example it produces this file path (http://localhost:63343/Desktop/test.html) on the browser and it loads the subtitles just fine.
So I am wondering if there is a way to solve my problem. How can I load the subtitles through the absolute path (file:///Users/user/Desktop/test.html). Is there something that I am missing here?
I am using google-chrome as a web browser.
Update: I was trying to debug my web page and I got the same error as Crossorigin errors when loading VTT file. Where same people say that they were able to solve this problem by Disable same origin policy in Chrome. I tried restarting my browser with the following way (open -a Google\ Chrome --args --disable-web-security) but it did not had any difference on my problem.
Update 2: I just tested the same problem on alternative browser Safar (Version 9.0.2 (11601.3.9)). On Safari I am able to see the subtitles with the (file:///Users/user/Desktop/test.html) and with (http://localhost:63343/Desktop/test.html) the video is not displayed.
With Google-Chrome (Version 47.0.2526.106 (64-bit)) I can play the video both ways but I can only see the subtitles with (http://localhost:63343/Desktop/test.html).
Further search on the web helped me to find CORS settings attributes where the user can set crossOrigin property either to (anonymous) or (use-credentials). I also tried that, the result was black screen in video.
So in conclusion I believe is a security issue and not a path file issue.
Sample of test.html code:
<!DOCTYPE html>
<html>
<head>
<title>Sample of video with vtt file</title>
</head>
<body>
<video id="video" controls preload="metadata" width="350" height="250" autoplay>
<source src="SampleVideo.mp4" type="video/mp4">
<source src="SampleVideo.ogg" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt" default>
</video>
</body>
</html>
Sample of subtitles-en.vtt file code:
WEBVTT
Introduction
00:00:00.000 --> 00:00:02.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour
Disclaimer
00:00:02.000 --> 00:00:05.000
This is just a track demo using VTT
I see that you have solved it yourself, but you are correct, it is indeed a security issue in that you cannot access files on the local filesystem that way.