Online Video Player with Subtitles & add captions to video

Finding a video player with subtitles and closed captions support is easy enough, but the player needs to be fully equipped. It must contain other advanced security features and support for customizations. It must be easy enough to add captions not only through a single supported file format like SRT, STL, SCC, RTF, etc, but also through multi-lingual caption support should be there. Multiple language subtitles support is important to cater to your global audience. So let us start with clarifying basic definitions of subtitles and captions, which will make it easy to understand the further interchanging references.

Subtitle Definition: According to HTML5 documentation, a subtitle is defined as dialogue transcription or translation. It is recommended when the sound is available with the video track but usually not understood due to language barriers.

Caption Definition: HTML5 documentation defines captions as transcription or translation of every part of the soundtrack. A soundtrack basically includes dialogues, sound, musical effects, and sometimes audio that is not completely decipherable or mute. In all these cases, captions provide all the information, like “birds chirping in the background,” and then some dialogue starts.

History of Subtitles and Captions with their use

Technically, filmmaking started in 1896, and it was only possible in 1906 to release a full-feature film. It was a without sound film titled “The Story of the Kelly Gang”. This period is usually called the silent era. Before 1908 is called the early silent period, and it is when “intertitles” started appearing in films. These intertitles can be defined as a title card or a printed text which is edited into the middle of the photographed section. In the silent era, “intertitles” started getting superimposed with the “subtitles” through the use of devices to project subtitles below the intertitles. In 1909, M. N. Tropp displayed additional text called “subtitles” on the bottom of the screen below the “intertitles.”

During the late silent era of 1918-1926, language addition was possible with the use of intertitles and subtitles. When films started having audio capabilities, subtitles were widespread and used interchangeably for intertitles. In the modern era, subtitles have evolved into captions to provide more information other than a mere transcription of dialogues. The use of commercial open-captioned broadcasts began on PBS in 1972, and Closed captioning got first demonstrated in Nashville, Tennessee, the US, at the First National Conference in 1971 on Television for the Hearing Impaired. The closed captions display text as an additional layer in the video that can be turned off. This gives closed captions an advantage over open captions, which are embedded in the video itself.

Role of Subtitles and Captions in Video Experience

As we have understood through their history, subtitles were early text capabilities getting added to a film. They were majorly used to communicate long and extra text other than intertitles. After the interchangeability of intertitles to subtitles, it was majorly getting used to translating the use of language in the form of text or transcription of foreign language audio. Until the 1970s, audio transcription got commercialized and evolved into captions.

The captions are to provide additional information other than the dialogues. It includes a transcription of dialogues, sound, musical effects, and sometimes audio that is not completely decipherable or mute. This enhances the user experience for all users and not only for people requiring hearing aid.

Also, the ability to switch these text layers and turn them off is a differentiating functionality. Closed Captions and Open Captions serve only on the On and Off functionality. The role of closed captions is just their functionality of turning themselves off and not requiring any kind of text embedding into the video.

The current popularity is mostly towards handling multiple language captions and creating automated captions from videos. The use of powerful language models like GPT-3, etc., also enhances this transcription process. Ultimately, Subtitles and captions can help improve the video experience for viewers by providing them with a way to follow along with the action sounds, music, background voice, and dialogue attached to the video. They can also help viewers who are deaf or hard of hearing to follow along with a video.

Online Video Player from URL with Subtitles

An “online video player from URL with subtitles” is a highly versatile tool that enables users to stream video content seamlessly from any direct web link (URL) while providing the added functionality of subtitle support. It is designed for convenience, allowing users to bypass the need for downloading video files by offering instant access to media hosted online. The subtitle feature enhances the user experience by displaying synchronized text, either for accessibility, such as assisting individuals with hearing impairments, or for understanding foreign language content through translations.

These players often support a wide range of subtitle formats, such as .srt, .vtt, or embedded captions, and may include options for customization, like adjusting font size, color, or positioning, to suit individual preferences. They are commonly accessible across platforms, working smoothly on desktops, tablets, and mobile devices, ensuring a consistent viewing experience.

For creators, educators, and businesses, these players are invaluable tools for sharing content with a global audience. They are particularly beneficial in online learning, international marketing, or entertainment contexts, where subtitles play a key role in breaking language barriers and ensuring inclusivity. By using an online video player with URL and subtitle support, you can offer a more engaging, user-friendly, and accessible video experience to viewers.

Subtitle or Caption – which one is better?

Subtitles and Captions both get used nowadays interchangeably. It is clear that captions contain more information than subtitles, but sometimes it is required enough one. For example, a new Hollywood release having a scene of an undecipherable alien communicating is better to be embedded into a movie video. This is because of the required ubiquity due to being an alien language and also due to the inconvenience of creating a caption or subtitle file to handle a small transcription.

Unlike the cases discussed in the above example, closed captions are more suitable than subtitles. The closed caption file contains more information about the other sounds an audio file contains. It still carries the text formatting of subtitles with a timestamp of each dialogue or sound effect. But with more information, the video experience improves for anyone requiring assistance. Also, those who don’t prefer these text overlays can easily turn off the captions in case of closed captions. We’ve also written a blog on Closed Captions vs Subtitles and covered this topic in much more detail, do check it out if you want to know more about the topic in much more detail.

How to Add Captions to Video?

Before adding subtitles or captions to your videos, it must be understood that it is possible only through attaching SRT, WebVTT, etc. files to your videos. Even the auto-captions services create a file through language models and attach the same with the video. After a closed caption file gets attached, it can be easily turned On and Off using the player functionality. It is also possible to add multiple caption files for multiple languages. All these upload options are provided by the platform on which your videos are uploaded or streamed through. As soon as the file gets attached to the video, it will be automatically fed through the iframe containing the < video > element containing the video.

Alternatively, the process is just like adding HTML attributes if you want to add captions directly to a video source URL via HTML. In this case, you will embed a video using the < video > tag and adding the required subtitles via the < track > tag within the video tag element. A compatible format for such embedding requires the captions file to be uploaded in WebVTT format. An example of the same is shown below.

<video id="video" controls preload="metadata">

<source src="video-file.mp4" type="video/mp4" />

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

<track label="Deutsch"
kind="subtitles"
srclang="de"
src="captions-de.vtt" />

</video>

How to Add Different Language Subtitles to a Video?

Some online programs and software allow automatic captions by using speech-to-text language models. As a public video platform, YouTube also provides automatic captions in English, Dutch, Japanese, Korean, Portuguese, French, German, Italian, Russian, Indonesian, and Spanish.

In the previous section, we discussed the addition of subtitles or captions to a video in multiple languages using HTML code. But where to add the multiple language formatted captions file is totally different for every platform, but the process remains nearly the same. For example, the following steps are followed to upload a multi-language custom subtitles or captions file to YouTube.

• Sign in to YouTube Studio.
• Select Subtitles from the left menu.
• Select the video that you’d like to add captions to.
• Click ADD LANGUAGE and select your desired language.
• Under subtitles, click ADD.

Similarly, if you are using a video hosting service for a private or subscription-based eLearning or OTT platform, only the platform changes, and the approach for attaching remains the same. For example, many eLearning solutions that use secure hosting provider like VdoCipher follows nearly the same steps as,

• Sign in to VdoCipher Dashboard.
• Click on the edit button of the video where captions/subtitles are to be added.
• Now click on the subtitles tab.
• Select your desired language and upload the respective VTT or SRT file.
• This will attach the file and can be turned On during playback for that video.

Best way to add subtitles to video for iPhone, Windows and PC

HTML5 video player is the easiest way to add subtitles and captions support to your videos with compatibility for iOS, mac, Windows, and other browsers and devices. Since HTML5 player has compatibility with most of devices and operating systems, the video can be easily attached with respective subtitle files. It not only supports a single caption file but also multi-language SRT and WebVTT files for different languages.

With an HTML5 player, you can also add the feature of illegal download protection by adding a DRM protection layer over it. Such options are also available with easy integration features through providers like VdoCipher. You can reach a global audience on Desktops, Android, IOS, and other devices. Also, through SDK Integration support for Android and IOS Native apps, HTML 5 adaptive player eases the captioning process during the playback. We’ve also written a blog on how to stream videos on iOS using AVPlayer, do check it out to know more about video streaming in iOS.

Best Online Video Player with Subtitles, Closed Captions & DRM

HTML5 players are considered the best players for supporting the latest technical advancements. Custom HTML5 players also support multi-language subtitles and captions support for global audiences. Also, they are the most secure video players when they get coupled with Video DRM Encryption.

VdoCipher allows videos to be embedded from URLs and supports subtitles in SRT or VTT formats, making it an excellent choice for providing accessible content to diverse audiences. With DRM (Digital Rights Management) encryption and secure streaming technology, video streamed on VdoCipher cannot be illegally downloaded or pirated. Our customizable video player supports multi-language subtitles, playback controls, and responsive design, offering a seamless viewing experience. Additionally, integration with websites, e-learning platforms, and LMS systems like WordPress and Moodle is very easy. It uses multi CDN’s for reliable and fast delivery, making it ideal for educational content, corporate training, and premium media platforms.

VdoCipher HTML5 advanced player has all these features and many more customization features like,

• Enable Caption Search
• Multi-Language Subtitles
• Adaptive Bitrate Streaming
• Show Progress Bar
• Show Scrubbing Preview
• Auto Resume
• Enable Keyboard Shortcuts
• Primary Color change via Hex color code
• Show Time Text
• Show Quality Control
• Enable PiP
• Enable AirPlay
• Hide Controls on Pause
• Show Replay At the End
• Enable Lock Controls
• Enable Save Offline

With so many feature-adding options, VdoCipher HTML5 advanced player is not only the most secure but also the most customizable as per brand needs.

How to auto-generate and add subtitles to video offline using Python for free

We can use many online tools, but most are either paid, or the trial version allows limited use. That is why we have tried to use some python libraries and Mozilla deep speech open-source engine for speech-to-text conversion. The complete process can be divided into the following code steps.

Install essential libraries and models-

$ sudo apt-get install ffmpeg
$ pip install deepspeech==0.8.2
# Downloading Language Model files
$ wget https://github.com/mozilla/DeepSpeech/releases/download/v0.8.2/deepspeech-0.8.2-models.pbmm
$ wget https://github.com/mozilla/DeepSpeech/releases/download/v0.8.2/deepspeech-0.8.2-models.scorer

Extract Audio separately-

import subprocess
def extractAudio(input_file, audio_file_name):
command = “ffmpeg -hide_banner -loglevel warning -i {} -b:a 192k -ac 1 -ar 16000 -vn {}”.format(input_file, audio_file_name)
try:
ret = subprocess.call(command, shell=True)
print(“Extracted audio to audio/{}”.format(audio_file_name.split(“/”)[-1]))
except Exception as e:
print(“Error: “, str(e))
exit(1)

Generating segment limits-

def silenceRemoval(input_file, smoothing_window = 1.0, weight = 0.2):
[fs, x] = read_audio_file(input_file)
segmentLimits = silence_removal(x, fs, 0.05, 0.05, smoothing_window, weight)

for i, s in enumerate(segmentLimits):
strOut = “{0:s}_{1:.3f}-{2:.3f}.wav”.format(input_file[0:-4], s[0], s[1])
wavfile.write(strOut, fs, x[int(fs * s[0]):int(fs * s[1])])

Producing a SRT file-

import numpy as np
from deepspeech import Model

def ds_process_audio(audio_file, file_handle):
ds = Model(ds_model)
ds.enableExternalScorer(ds_scorer)

fin = wave.open(audio_file, ‘rb’)
audio = np.frombuffer(fin.readframes(fin.getnframes()), np.int16)
fin.close()

# Perform inference on audio segment
infered_text = ds.stt(audio)

# File name contains start and end times in seconds. Extract that
limits = audio_file.split(“/”)[-1][:-4].split(“_”)[-1].split(“-“)

if len(infered_text) != 0:
line_count += 1
write_to_file(file_handle, infered_text, line_count, limits)

Note: If you need to convert SRT to WebVTT file, there are multiple free online converters to do so.

FAQs

What handles subtitles during playback?

The player handling the playback handles the subtitles or closed captions through the supported format file. In the case of embedded subtitles or open captions, it is handled via a video editor placing the text layer during production.

Do subtitles and captions cause any security issues?

No, they do not create any security issues as they are fed as separate files to be attached to the main video file. The video security issues are generally handled via DRM security for video content encryption and dynamic and encrypted playback.

Which is better, WebVTT or SRT file?

A WebVTT file is identical to the SRT subtitle file but contains additional styling, rendering, text formatting, and position options. It needs UTF-8 encoding and is highly compatible with HTML5 video players.

How to handle srt player online playback issues?

A player issue in such cases gets resolved through a reload, but if there is an issue with the SRT or WebVTT file, it needs to be addressed through re-upload or error rectification in the respective file.