Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Need Help w/ Subtitles for HTML Video

Julamin

New Coder
Hello all. I am working on making a simple local web-page media player for some local video files that I have. One of the things I am very particular about having is subtitles, seeing as I often times have a hard time hearing what people are saying all the time. While I am not a new-comer to HTML by any means, I have never done this before. I followed some tutorials, but it still refuses to work. I can't tell if I'm missing something obvious, or if there is a large problem at play here. Here is some example code below:

[CODE lang="html" title="HTML Video Subtitle Example" highlight="3"]<video width="1440" height="1080" controls>
<source src="file:///R:\Star Trek\Shows\The Original Series\Season 1\1 - Episodes\1 - The Man Trap.m4v" type="video/mp4">
<track src="file:///R:\Star Trek\Shows\The Original Series\Season 1\1 - Episodes\Subtitles\VTT Files\1 - The Man Trap_Subtitles[eng].vtt" kind="subtitles" srclang="en" label="English" default>
</video>[/CODE]

As you can see, nothing complicated here. However, when I load the web-page, while the video loads just fine, the subtitles are nowhere to be found. And I've also verified that the WebVTT file is valid as well, though here is a clip from it in case somebody asks:

[CODE title="VTT Subtitle Example"]WEBVTT

1
00:00:05.797 --> 00:00:09.259
KIRK:
Captain's log, stardate 1513.1.

2
00:00:09.426 --> 00:00:12.763
Our position, orbiting planet M-113.

3
00:00:12.930 --> 00:00:14.264
On board the Enterprise,

4
00:00:14.723 --> 00:00:17.684
Mr. Spock, temporarily in command.[/CODE]

I've been scratching my head over this issue for quite a while now, and any help would be very much appreciated! I am happy to share any additional images or code that anyone might need. Thanks in advance!
 
So after doing a bit of digging and some testing, it appears that WebVTT requires a web server to load correctly.

I made my own HTML video player to test and I can confirm it only worked for me when using Apache via XAMPP on Windows.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom