fix(html): mention the subtitle code needs to be hosted (#34262)

* fix(html): mention the subtitle code needs to be hosted

* use index.html as file name

* link to setting up http server page instead

* Update index.md

* Apply suggestions from code review

* Update files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md

---------

Co-authored-by: Joshua Chen <[email protected]>

files/en-us/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md

@@ -56,6 +56,30 @@ For VSCode, you can check the following free extension:
 
 - `vscode-preview-server`. You can check it on its [home page](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server).
 
+### Using Node.js
+
+The Node.js [`http-server`](https://www.npmjs.com/package/http-server) module is an easiest way to host HTML files in any directory.
+
+To use the module:
+
+1. Run the following commands to check if Node.js is already installed:
+
+   ```bash
+   node -v
+   npm -v
+   npx -v
+   ```
+
+2. If Node.js is not installed, you need to install it. Follow the [download instructions](https://nodejs.org/en/download/) in the Node.js docs, then run the above commands again to check if the installation is successful.
+
+3. Let's assume the directory is `/path/to/project`. Run the following command to start the server:
+
+   ```bash
+   npx http-server /path/to/project -o -p 9999
+   ```
+
+   This hosts all files in the `/path/to/project` directory on `localhost:9999`. The option `-o` will open the `index.html` page in a web browser. If `index.html` doesn't exist, then the directory is displayed instead.
+
 ### Using Python
 
 Another way to achieve this is to use Python's `http.server` module.

files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md

@@ -251,7 +251,7 @@ This is the second.
 
 To get this displayed along with the HTML media playback, you need to:
 
-1. Save it as a `.vtt` file in a sensible place.
+1. Save it as a `.vtt` file somewhere the server can serve (see below), such as in the same directory as the HTML file.
 2. Link to the `.vtt` file with the {{htmlelement("track")}} element. `<track>` should be placed within `<audio>` or `<video>`, but after all `<source>` elements. Use the [`kind`](/en-US/docs/Web/HTML/Element/track#kind) attribute to specify whether the cues are `subtitles`, `captions`, or `descriptions`. Further, use [`srclang`](/en-US/docs/Web/HTML/Element/track#srclang) to tell the browser what language you have written the subtitles in. Finally, add [`label`](/en-US/docs/Web/HTML/Element/track#label) to help readers identify the language they are searching for.
 
 Here's an example:
@@ -264,7 +264,7 @@ Here's an example:
 </video>
 ```
 
-This will result in a video that has subtitles displayed, kind of like this:
+In order to try this you need to host the files on a [local HTTP server](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). In the output in browser, you'll see a video that has subtitles displayed, kind of like this:
 
 ![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."](video-player-with-captions.png)