viewer icon indicating copy to clipboard operation
viewer copied to clipboard

add subtitles for video feature

Open caythanhgia opened this issue 5 years ago • 6 comments

add this code to Videos.vue : template->video support many subtitle `

	<track
		:src="davPath.replace(/\.[^\.]+$/, '.vi.vtt')"
		label="Vietnamess"
		kind="captions"
		srclang="vi-vn" default />`

caythanhgia avatar Sep 09 '19 08:09 caythanhgia

Any files to give me a working example? Also please use the appropriate issues templates tex time :)

skjnldsv avatar Sep 09 '19 08:09 skjnldsv

Hi @skjnldsv Indeed captions would be a nice addition to the viewer. And it seems we could leverage plyr.io support for HTML5 captions to provide the feature at a low cost? Is there no traction for this?

douzebis avatar May 17 '21 19:05 douzebis

I just tested the patch below. Does quite a decent job. I might send a pull request?

diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index 727939b..007c203 100644
--- a/src/components/Videos.vue
+++ b/src/components/Videos.vue
@@ -41,6 +41,17 @@
                                @ended="donePlaying"
                                @canplay="doneLoading"
                                @loadedmetadata="onLoadedMetadata">
+                               <track
+                                       :src="davPath.replace(/\.[^\.]+$/, '.en.vtt')"
+                                       label="English"
+                                       kind="captions"
+                                       srclang="en"
+                                       default />`
+                               <track
+                                       :src="davPath.replace(/\.[^\.]+$/, '.fr.vtt')"
+                                       label="French"
+                                       kind="captions"
+                                       srclang="fr" />`
 
                                <!-- Omitting `type` on purpose because most of the
                                        browsers auto detect the appropriate codec.

douzebis avatar May 19 '21 21:05 douzebis

Plyr.io supports only .vtt (its more like HTML5 thing) https://github.com/maple3142/GDIndex

The above index, has support for .srt files too.

MeowMeowVenom avatar Jun 21 '21 12:06 MeowMeowVenom

Plyr.io supports only .vtt (its more like HTML5 thing) https://github.com/maple3142/GDIndex

The above index, has support for .srt files too.

Actually, pull request #915 will provide .srt-like support for plyr.io. It is already working and (I reckon) just lacks unit tests before it can be merged into master. Unfortunately I have no time at the moment to complete the job :(

douzebis avatar Jun 21 '21 13:06 douzebis

supporting anything else than vtt files will require to have an endpoint to is able to extract subtitles from the video and expose them as a conversion to vtt.

there might be libraries that do it (I seem to remember a Node JS based one)

maybe the generated vtt file could be cached in appdata like image previews after extracting+generating

PVince81 avatar Aug 22 '22 06:08 PVince81