You add a <track> to the video and you have to do some other modifications to the video player besides.
I've gone down this route before and it didn't seem to work specifically because of the extra things that have to be done. The point being that video.js doesn't make <track> work out of the box.
The downside of this link is that it assumes custom controls (as in our own). Well video.js already does that.
I know from doing this earlier this earlier that video.js does show the CC menu. You can select the item which didn't seem to toggle them on even in the javascript, but you can toggle the track on in the javascript. This changes the state of the track but doesn't appear.
^ That is where the extra work comes in. Unfortunately this link doesn't seem to help me close the gap between the video.js controls and the javascript.
BTW, why not look up how to do it in video.js? Because video.js has multiple versions of out dated documentation floating around and I said fuck it. It's still an html5 player and by polymorphism any JS that puts subs onto html5 video should work on that player.
Nope. I figured it out. It was mostly a glitch on why it wasn't working easily. You just add a <track> element with a link to the subtitles.
Here's the deal with the glitch. The subtitles need to be on the same domain. It doesn't matter if you have permissive cross domain set. For this it has to be on the same domain. The real glitch is that Firefox doesn't tell you that's a problem while chrome does tell you what's wrong.
But on firefox you can just use a dataurl instead of a regular url.
Compared to your solution it saves you from constantly reading the time from the player and associating it with a position in a subs file which you would have to parse yourself.
Way easier to just to link to it if you control the site or inject the <track> with jquery on a site you don't control.
13 comments
0 u/fusir [OP] 18 Mar 2018 18:23
Parse srt files into an array: https://www.snip2code.com/Snippet/83321/Simple-SRT-parser-in-JavaScript
0 u/fusir [OP] 18 Mar 2018 18:27
This one get's it kind of close. Does it completeling avoiding any html5-video property.
http://v2v.cc/~j/jquery.srt/
0 u/fusir [OP] 18 Mar 2018 18:33
This is the best source: https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
You add a
<track>to the video and you have to do some other modifications to the video player besides.I've gone down this route before and it didn't seem to work specifically because of the extra things that have to be done. The point being that video.js doesn't make
<track>work out of the box.0 u/fusir [OP] 18 Mar 2018 18:45
The downside of this link is that it assumes custom controls (as in our own). Well video.js already does that.
I know from doing this earlier this earlier that video.js does show the
CCmenu. You can select the item which didn't seem to toggle them on even in the javascript, but you can toggle the track on in the javascript. This changes the state of the track but doesn't appear.^ That is where the extra work comes in. Unfortunately this link doesn't seem to help me close the gap between the video.js controls and the javascript.
BTW, why not look up how to do it in video.js? Because video.js has multiple versions of out dated documentation floating around and I said fuck it. It's still an html5 player and by polymorphism any JS that puts subs onto html5 video should work on that player.
0 u/fusir [OP] 18 Mar 2018 18:50
Convert SRT files to webVTT
http://www.webvtt.org/
0 u/fusir [OP] 18 Mar 2018 18:51
Our Working Files:
0 u/fusir [OP] 18 Mar 2018 18:52
Currently uploaded Boondock Saints (Folder): https://venus.i.ipfs.io/ipfs/QmeQFtHC8K9DiM8ZybxFJgfZVk3skfS261Azk7uou8VLBi
0 u/fusir [OP] 18 Mar 2018 18:54
Folder for webVTT subs: https://venus.i.ipfs.io/ipfs/QmTWJQxaPn6TMKfZugH4DqpbMp23otMcvgEXzZTUFeoFLh
0 u/fusir [OP] 18 Mar 2018 18:56
<track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default><track label="English" kind="subtitles" srclang="en" src="https://venus.i.ipfs.io/ipfs/QmTWJQxaPn6TMKfZugH4DqpbMp23otMcvgEXzZTUFeoFLh/boondock.vtt" default>0 u/fusir [OP] 18 Mar 2018 19:15
Here is a working example inside Firefox:
https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html
0 u/fusir [OP] 18 Mar 2018 21:31
THE COMPLETED RESULT:
Paste this into a browser on cytu.be and you get subs for Boondocks:
https://venus.i.ipfs.io/ipfs/QmPw7u4LkByUMPkcLbA9LLHiA8qGNannLfL1n4qfY5tCLT
0 u/MrKequc 19 Mar 2018 08:49
Forgive my ignorance wouldn't it be a lot simpler to overlay html subtitles over html5 video?
0 u/fusir [OP] 21 Mar 2018 07:26
Nope. I figured it out. It was mostly a glitch on why it wasn't working easily. You just add a <track> element with a link to the subtitles.
Here's the deal with the glitch. The subtitles need to be on the same domain. It doesn't matter if you have permissive cross domain set. For this it has to be on the same domain. The real glitch is that Firefox doesn't tell you that's a problem while chrome does tell you what's wrong.
But on firefox you can just use a dataurl instead of a regular url.
Compared to your solution it saves you from constantly reading the time from the player and associating it with a position in a subs file which you would have to parse yourself.
Way easier to just to link to it if you control the site or inject the <track> with jquery on a site you don't control.
Thanks for giving your thoughts though.