nextcloud / viewer

🖼 Simple file viewer with slideshow for media
GNU Affero General Public License v3.0
91 stars 52 forks source link

add subtitles for video feature #239

Open caythanhgia opened 4 years ago

caythanhgia commented 4 years ago

add this code to Videos.vue : template->video support many subtitle ` <track :src="davPath.replace(/.[^.]+$/, '.en.vtt')" label="English" kind="captions" srclang="en-us" />

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

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

douzebis commented 3 years ago

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 commented 3 years ago

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.
MeowMeowVenom commented 3 years ago

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

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

douzebis commented 3 years ago

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 :(

PVince81 commented 1 year ago

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