With this, you can get the subtitles that perfectly fit your needs. font-family : “Arial”, or all the other google fonts.To set their style, add a CSS tag, then add #grow_audience : : cue, Here are all the tags you can use: Manual HTML5 is interesting in its many possibilities to customize the appearance of your subtitles. How can I customize the style of my HTML5 subtitles? Note also that you can add as many languages as you want by adding a tag. The video will then be displayed automatically. The label tag gives the title of your subtitle, kind identifies if it’s subtle or captions, srclang defines the language, and src the localization of your file.
How to encode subtitles in your HTML5 video?Īfter that, to implement the subtitle in the HTML5 code, you need to add a tag as follows : When your work is over, you can then export the subtitle file by clicking on “Exportation” and download the. When the transcription process is over, you can access the subtitle editor and optimize the result. Select the original language and the one you want to get.
You can also give your project to our subtitle experts if you have a larger volume. With speech-to-text technologies, you can create subtitles much faster.
In the second case, you can use our VTT file generator. In the first case, here is the format to rely on: That’s why you either have to create it from the transcript or use an automatic subtitle generator. Now, how do you display subtitles on your video? The only subtitle format supported by HTML5 is VTT.
Here’s what an implementation of your video might look like: HTML5 subtitles: where to get them? But you can add an OGG format to make sure your video is readable by everyone.Īs for the rest, the id tag identifies your video, and adding a text inside the video tag ensures that the user is warned of a display error.
To reference your video, you need to add the source tag src, specifying the format of your video with type.Īs a general rule, the MP4 format is supported by all browsers. You can also set the resolution of the video with width and height. The controls tag ensures that your video player displays playback options if you enable it. The code is based on adding a tag in your HTML. How to correctly implement your HTML5 video?įirst, a little reminder of the basic rules for implementing a video in HTML5. Here’s how to correctly encode subtitles on HTML5. In particular, this enables you to optimize the accessibility settings of your video according to your needs, by adding the subtitles you want.