
This is done by setting the required subtitle's mode attribute to showing, and setting the others to hidden. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off.

getAttribute ( "lang" ) for ( let i = 0 i and elements, and returns them so they can be added to the subtitles menu list. As a consequence, the video controls now look as follows:Ĭonst subtitleMenuButtons = function createMenuItem ( id, lang, label ) ) // Find the language to activate const lang = button. In addition to adding the elements, we have also added a new button to control the subtitles menu that we will build. The default attribute is set on the English element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.

srclang indicates what language each subtitle files' contents are in.src is assigned a valid URL pointing to the relevant WebVTT subtitle file in each case.label is given a value indicating which language that subtitle set is for - for example English or Deutsch - these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.kind is given a value of subtitles, indicating the type of content the files contain.As you can see, each element has the following attributes set:
