Subtitle Video Embedding

Question
1

Hello,

Is it possible to embed video from disk with subtitle option (e.g. srt-file) within sitely 5/6 native (not YouTube/vimeo/html5-coding)?

Howto?

2

From my understanding of the Sitely video element, it does not provide a native UI for subtitles/captions (e.g. .SRT files) or track management.

Your options

Option 1 — Use Sitely’s HTML embed (recommended workaround)

Even though you said “no HTML coding,” this is realistically the only way to get SRT subtitles working properly inside Sitely. If you want a piece of embed code to achieve this, let me know and I will add it to this thread.

Option 2 — Burn subtitles into the video

You can permanently embed subtitles using tools like:
• HandBrake
• ffmpeg

Pros:
• Works with Sitely’s native video block
• No coding required

Cons:
• Subtitles can’t be turned on/off
• No multi-language support

Option 3 — Use a third-party player

Some external players support subtitles cleanly:
• Plyr
• Video.js

But again:
These still require HTML embed in Sitely.

3

Hi Stephie,

thank you for your contribution.

At the moment I am creating videos with embedded subtitles - used on Linkedin and within my website (blog with videos). I thought about embedding videos with an subtitle-option (on/off/german/english).

All my videos are stored within file directory on my Server where the website is hosted. So it is all in my hand and in my control. I started with using Sparkle and I am now using Sitely 6.1 Personal (Licence 5.x).

I had still saved in my memory for Sparkle and later also for Sitely that HTML does not work.

With embedding probably something like <iframe src=”website-reference” …> ?! And I don’t have a suitable website reference on my website.

Something like HTML 5 code with vtt- or srt-file would be more comfortable, e.g.

xvideo controls src=“video.webm”>
xtrack default kind=“captions” src=“captions.vtt” />
</videox

But I don’t know any way to do that in Sitely.

4

The best option is to upload your video and its vtt file (vtt is better than srt) to your hosting server - preferably within its own folder. That way, you will have an external url to include in the embed code in your Sitely project. Uploading the video can be done easily through your hosting c-panel or through any ftp application. The embed code is simple to add to your Sitely project through an embed object. Like I said before, if you want some code to try, please let me know the URL for your video file and I’ll send you a piece of custom code you can embed.

5

There are two videos. One English version with subtitle and one German version with subtitle.

I want to combine the German version with subtitle german, english, off.
The time stamps are maybe not fitting, but it’s only an example.

And vice versa also for the English version. From an sample example I can probably open up the rest?!

src="https://…/SOS…_Subtitle 1.vtt“

src="https://…/SOS….mp4“

and “SOS…(de)_Subtitle 1.vtt“ with “SOS…(de).mp4“

6

This is the code for embedding the video - Replace the url with the exact location of your video file.

<video controls width="100%" preload="metadata">
  <source src="your-video-file.mp4" type="video/mp4">

  <track 
    src="subtitles.vtt" 
    kind="subtitles" 
    srclang="en" 
    label="English" 
    default>

  Your browser does not support the video tag.
</video>

If you want to add more than one set of subtitles, Make the following changes to the code:

<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Español">

If you also want to add a thumbnail image to display before play, add the following:

<video controls width="100%" poster="thumbnail.jpg">

Make sure the video thumbnail image is stored in the same folder as the video and vtt files.

7

Thank you, for your support – it works fine!

1 Like