Skip to content

Commit

Permalink
Fixable flaws on audio and video guides (mdn#5248)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelandrew
rachelandrew authored May 24, 2021
1 parent 0e095fb commit 098a3a5
Show file tree
Hide file tree
Showing 10 changed files with 56 additions and 58 deletions.
30 changes: 15 additions & 15 deletions ...eb/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<h2 id="Captioned_video_example">Captioned video example</h2>

<p>In this article, we will refer to the Video player with captions example. This example uses an excerpt from the <a href="http://www.sintel.org/">Sintel open movie</a>, created by the <a href="http://www.blender.org/foundation/">Blender Foundation</a>.</p>
<p>In this article, we will refer to the Video player with captions example. This example uses an excerpt from the <a href="https://www.sintel.org/">Sintel open movie</a>, created by the <a href="https://www.blender.org/foundation/">Blender Foundation</a>.</p>

<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png" style="display: block; margin: 0px auto;"></p>

Expand All @@ -30,7 +30,7 @@ <h2 id="HTML5_and_Video_Captions">HTML5 and Video Captions</h2>

<h3 id="Captions_versus_subtitles">Captions versus subtitles</h3>

<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">Captions and subtitles are not the same thing</a>: they have significantly different audiences, and convey different information, and it is recommended that you read up on the differences if you are not sure what they are. They are however implemented in the same way technically, so the material in this article will apply to both.</p>
<p><a href="https://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">Captions and subtitles are not the same thing</a>: they have significantly different audiences, and convey different information, and it is recommended that you read up on the differences if you are not sure what they are. They are however implemented in the same way technically, so the material in this article will apply to both.</p>

<p>For this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people.</p>

Expand All @@ -40,15 +40,15 @@ <h3 id="The_&lt;track&gt;_element">The &lt;track&gt; element</h3>

<h3 id="WebVTT">WebVTT</h3>

<p>The files that contain the actual subtitle data are simple text files that follow a specified format, in this case the <a href="/en-US/docs/Web/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) format. The <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> is still being worked on, but major parts of it are stable so we can use it today.</p>
<p>The files that contain the actual subtitle data are simple text files that follow a specified format, in this case the <a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks</a> (WebVTT) format. The <a href="https://dev.w3.org/html5/webvtt/">WebVTT specification</a> is still being worked on, but major parts of it are stable so we can use it today.</p>

<p>Video providers (such as the <a href="http://www.blender.org/foundation/">Blender Foundation</a>) provide captions and subtitles in a text format with their videos, but they're usually in the SubRip Text (SRT) format. These can be easily converted to WebVTT using an online converter such as <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p>
<p>Video providers (such as the <a href="https://www.blender.org/foundation/">Blender Foundation</a>) provide captions and subtitles in a text format with their videos, but they're usually in the SubRip Text (SRT) format. These can be easily converted to WebVTT using an online converter such as <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p>

<h2 id="Modifications_to_the_HTML_and_CSS">Modifications to the HTML and CSS</h2>

<p>This section summarizes the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the {{ anch("Subtitle implementation") }} section.<br>
<br>
In this example we are using a different video, <a href="http://www.sintel.org/">Sintel</a>, as it actually has some speech in it and therefore is better for illustrating how subtitles work!</p>
In this example we are using a different video, <a href="https://www.sintel.org/">Sintel</a>, as it actually has some speech in it and therefore is better for illustrating how subtitles work!</p>

<h3 id="HTML_Markup">HTML Markup</h3>

Expand Down Expand Up @@ -128,7 +128,7 @@ <h3 id="Initial_setup">Initial setup</h3>

<p>The <code>video.textTracks</code> property contains an array of all the text tracks attached to the video. We loop through each one and set its <code>mode</code> to <code>hidden</code>.</p>

<p>Note: The <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> gives us access to all the text tracks that are defined for an HTML5 video using the <code>&lt;track&gt;</code> element.</p>
<p>Note: The <a href="https://dev.w3.org/html5/webvtt/#api">WebVTT API</a> gives us access to all the text tracks that are defined for an HTML5 video using the <code>&lt;track&gt;</code> element.</p>

<h3 id="Building_a_caption_menu">Building a caption menu</h3>

Expand Down Expand Up @@ -233,7 +233,7 @@ <h3 id="Subtitle_menu_CSS">Subtitle menu CSS</h3>

<h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2>

<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>
<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="https://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>

<p>The <code>::cue</code> pseudo-element is the key to targeting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p>

Expand All @@ -255,7 +255,7 @@ <h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2>
color:#ccc;
}</pre>

<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>
<p>If the WebVTT file uses <a href="https://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>

<pre>0
00:00:00.000 --&gt; 00:00:12.000
Expand Down Expand Up @@ -301,26 +301,26 @@ <h2 id="Plugins">Plugins</h2>
<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p>

<dl>
<dt><a href="http://plyr.io">plyr.io </a></dt>
<dt><a href="https://plyr.io">plyr.io </a></dt>
<dd>This modern video player implements subtitles in both SRT and WebVTT file formats.</dd>
<dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt>
<dt><a href="https://www.delphiki.com/html5/playr/">playr</a></dt>
<dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd>
<dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt>
<dd>HTML5 player supporting WebVTT.</dd>
<dt><a href="http://www.jwplayer.com/">jwplayer</a></dt>
<dt><a href="https://www.jwplayer.com/">jwplayer</a></dt>
<dd>This video player is very extensive and does a lot more than support video captions. It supports the WebVTT, SRT and DFXP formats.</dd>
<dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt>
<dd>Another complete video player that also support video captions, albeit only in SRT format.</dd>
<dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt>
<dt><a href="https://www.leanbackplayer.com/">LeanBack Player</a></dt>
<dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd>
<dt><a href="http://sublimevideo.net">SublimeVideo</a></dt>
<dt><a href="https://sublimevideo.net">SublimeVideo</a></dt>
<dd>This player also supports captions through WebVTT and SRT files.</dd>
<dt><a href="http://www.videojs.com/">Video.js</a></dt>
<dt><a href="https://www.videojs.com/">Video.js</a></dt>
<dd>Supports WebVTT video subtitles.</dd>
<dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt>
<dd>Supports multi-languages WebVTT closed captions</dd>
</dl>

<div class="note">
<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="https://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
</div>
4 changes: 2 additions & 2 deletions files/en-us/web/guide/audio_and_video_delivery/cross-browser_audio_basics/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -739,7 +739,7 @@ <h2 id="See_also">See also</h2>
<li><a href="/en-US/docs/Web/Events#media">Event reference > Media</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using HTML5 audio and video</a></li>
<li><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li>
<li><a href="http://jPlayer.org">jPlayer</a>: An open source audio and video library for jQuery and Zepto.</li>
<li><a href="http://jplayer.org/HTML5.Media.Event.Inspector">Media Event Inspector</a><br>
<li><a href="https://jPlayer.org">jPlayer</a>: An open source audio and video library for jQuery and Zepto.</li>
<li><a href="https://jplayer.org/HTML5.Media.Event.Inspector">Media Event Inspector</a><br>
 </li>
</ul>
2 changes: 1 addition & 1 deletion files/en-us/web/guide/audio_and_video_delivery/cross_browser_video_player/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<h2 id="Working_example">Working example</h2>

<p>Our example video player displays a clip from an open source movie called <a href="http://mango.blender.org/about/">Tears of Steel</a>, and includes typical video controls.</p>
<p>Our example video player displays a clip from an open source movie called <a href="https://mango.blender.org/about/">Tears of Steel</a>, and includes typical video controls.</p>

<p><img alt="a shot of a video player, with several control buttons such as play, pause and stop. The video is showing a group of men fighting a group of robots." src="video-player-example.png" style="display: block; margin: 0px auto;"></p>

Expand Down
30 changes: 14 additions & 16 deletions files/en-us/web/guide/audio_and_video_delivery/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ <h4>Note</h4>

<pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>

<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p>
<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="https://speak-demo.herokuapp.com">Try the demo</a>.</p>

<h3 id="JavaScript_Video">JavaScript Video</h3>

Expand Down Expand Up @@ -361,12 +361,12 @@ <h3 id="Checking_whether_the_browser_supports_the_supplied_formats">Checking whe
<p>Use the following verified sources within your audio and video elements to check support.</p>

<ul>
<li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
<li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
<li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
<li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
<li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
<li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
<li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
<li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
<li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
<li>Video MP4 (<code>type="video/mp4"</code>): <a href="https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
<li>Video WebM (<code>type="video/webm"</code>): <a href="https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
<li>Video Ogg (<code>type="video/ogg"</code>): <a href="https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
</ul>

<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br>
Expand Down Expand Up @@ -396,12 +396,12 @@ <h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been enc

<ul>
<li><a href="http://audacity.sourceforge.net/">Audacity</a> — Free Audio Editor and Recorder</li>
<li><a href="http://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li>
<li><a href="http://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li>
<li><a href="https://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li>
<li><a href="https://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li>
<li><a href="http://firefogg.org/">Firefogg</a> — Video and Audio encoding for Firefox</li>
<li><a href="https://www.ffmpeg.org/">FFmpeg2</a> — Comprehensive command line encoder</li>
<li><a href="https://libav.org/">Libav</a> — Comprehensive command line encoder</li>
<li><a href="http://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li>
<li><a href="https://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li>
<li><a href="https://archive.org/">Internet Archive</a> — Free transcoding and storage</li>
</ul>

Expand Down Expand Up @@ -450,15 +450,15 @@ <h3 id="Video_only">Video only</h3>

<ul>
<li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li>
<li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
<li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
<li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
<li><a href="https://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
<li><a href="https://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
<li><a href="https://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
</ul>

<h3 id="Audio_and_Video">Audio and Video</h3>

<ul>
<li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
<li><a href="https://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
<li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li>
</ul>

Expand Down Expand Up @@ -503,8 +503,6 @@ <h2 id="Advanced_tutorials">Advanced tutorials</h2>
<dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="/en-US/docs/Web/API/WebVTT_API" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track&gt; element. The primary purpose of WebVTT files is to add subtitles to a &lt;video&gt;.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
<dt><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
<dd>A guide to writing cross browser Web Audio API code.</dd>
<dt><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery">H.264 support in Firefox</a></dt>
<dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
<dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
<dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
</dl>
Expand Down
Loading

0 comments on commit 098a3a5

Please sign in to comment.