Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ia): reorg Web/Media #37898

Merged
merged 20 commits into from
Feb 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 81 additions & 55 deletions files/en-us/_redirects.txt

Large diffs are not rendered by default.

58 changes: 27 additions & 31 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -121927,7 +121927,7 @@
"Bean2223"
]
},
"Web/Media/Audio_and_video_delivery": {
"Web/Media/Guides/Audio_and_video_delivery": {
"modified": "2020-12-11T05:27:12.652Z",
"contributors": [
"bershanskiy",
Expand All @@ -121941,7 +121941,7 @@
"FredB"
]
},
"Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
"Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
"modified": "2019-03-18T20:51:47.296Z",
"contributors": [
"chrisdavidmills",
Expand All @@ -121958,7 +121958,7 @@
"MartinRinehart"
]
},
"Web/Media/Audio_and_video_delivery/Cross-browser_audio_basics": {
"Web/Media/Guides/Audio_and_video_delivery/Cross-browser_audio_basics": {
"modified": "2020-11-16T08:10:17.867Z",
"contributors": [
"chrisdavidmills",
Expand All @@ -121974,7 +121974,7 @@
"maboa"
]
},
"Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video": {
"Web/Media/Guides/Audio_and_video_delivery/Live_streaming_web_audio_and_video": {
"modified": "2019-04-02T11:11:28.390Z",
"contributors": [
"kenrick95",
Expand All @@ -121990,15 +121990,15 @@
"maboa"
]
},
"Web/Media/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources": {
"Web/Media/Guides/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources": {
"modified": "2019-03-18T20:51:46.989Z",
"contributors": ["chrisdavidmills", "mfuji09", "obax", "rybi", "maboa"]
},
"Web/Media/Audio_and_video_delivery/Video_player_styling_basics": {
"Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics": {
"modified": "2019-09-06T13:44:57.765Z",
"contributors": ["agdillon", "DeltaTV", "chrisdavidmills"]
},
"Web/Media/Audio_and_video_delivery/WebAudio_playbackRate_explained": {
"Web/Media/Guides/Audio_and_video_delivery/WebAudio_playbackRate_explained": {
"modified": "2019-03-18T20:51:48.122Z",
"contributors": [
"chrisdavidmills",
Expand All @@ -122007,7 +122007,7 @@
"teoli"
]
},
"Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges": {
"Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges": {
"modified": "2019-04-12T10:12:05.792Z",
"contributors": [
"industral",
Expand All @@ -122017,7 +122017,7 @@
"maboa"
]
},
"Web/Media/Audio_and_video_delivery/cross_browser_video_player": {
"Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player": {
"modified": "2020-05-27T13:29:20.861Z",
"contributors": [
"rafaqf",
Expand All @@ -122033,7 +122033,7 @@
"Ian-Devlin"
]
},
"Web/Media/Audio_and_video_manipulation": {
"Web/Media/Guides/Audio_and_video_manipulation": {
"modified": "2020-09-02T12:20:43.182Z",
"contributors": [
"mfuji09",
Expand All @@ -122044,11 +122044,11 @@
"a-mt"
]
},
"Web/Media/Autoplay_guide": {
"Web/Media/Guides/Autoplay": {
"modified": "2020-10-11T23:21:36.266Z",
"contributors": ["Malvoz", "scunliffe", "MrAlexWeber", "Sheppy"]
},
"Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video": {
"Web/Media/Guides/DASH_Adaptive_Streaming_for_HTML_5_Video": {
"modified": "2020-11-09T07:34:43.578Z",
"contributors": [
"mfuji09",
Expand All @@ -122070,11 +122070,11 @@
"joshmoz"
]
},
"Web/Media/Formats": {
"Web/Media/Guides/Formats": {
"modified": "2019-11-15T11:45:09.792Z",
"contributors": ["Sheppy", "jswisher", "Havi Hoffman"]
},
"Web/Media/Formats/Audio_codecs": {
"Web/Media/Guides/Formats/Audio_codecs": {
"modified": "2019-12-06T17:58:10.741Z",
"contributors": [
"slokhorst",
Expand All @@ -122084,11 +122084,11 @@
"GiacomoSorbi"
]
},
"Web/Media/Formats/Audio_concepts": {
"Web/Media/Guides/Formats/Audio_concepts": {
"modified": "2020-06-01T18:13:20.323Z",
"contributors": ["atd30", "Sheppy"]
},
"Web/Media/Formats/Configuring_servers_for_Ogg_media": {
"Web/Media/Guides/Formats/Configuring_servers_for_Ogg_media": {
"modified": "2019-09-10T19:10:12.290Z",
"contributors": [
"Sheppy",
Expand All @@ -122106,11 +122106,11 @@
"sorinelpusti"
]
},
"Web/Media/Formats/Containers": {
"Web/Media/Guides/Formats/Containers": {
"modified": "2020-04-18T23:02:19.945Z",
"contributors": ["sideshowbarker", "FFV47", "Sheppy", "mukhtar-github"]
},
"Web/Media/Formats/Image_types": {
"Web/Media/Guides/Formats/Image_types": {
"modified": "2020-11-08T19:25:21.989Z",
"contributors": [
"hamishwillee",
Expand All @@ -122124,11 +122124,11 @@
"matthendrix"
]
},
"Web/Media/Formats/Support_issues": {
"Web/Media/Guides/Formats/Support_issues": {
"modified": "2019-08-13T12:38:59.984Z",
"contributors": ["Sheppy"]
},
"Web/Media/Formats/Video_codecs": {
"Web/Media/Guides/Formats/Video_codecs": {
"modified": "2020-11-12T07:24:28.263Z",
"contributors": [
"chrisdavidmills",
Expand All @@ -122140,30 +122140,26 @@
"KarlPiper"
]
},
"Web/Media/Formats/Video_concepts": {
"Web/Media/Guides/Formats/Video_concepts": {
"modified": "2020-05-08T05:39:14.735Z",
"contributors": ["Tolokoban2", "Sheppy"]
},
"Web/Media/Formats/WebRTC_codecs": {
"Web/Media/Guides/Formats/WebRTC_codecs": {
"modified": "2020-08-20T11:05:40.490Z",
"contributors": ["Sheppy", "bfamchon", "TheSpecialist4"]
},
"Web/Media/Formats/codecs_parameter": {
"Web/Media/Guides/Formats/codecs_parameter": {
"modified": "2020-11-09T17:29:24.908Z",
"contributors": ["lucaswerkmeister", "leela52452", "Sheppy", "pehrsons"]
},
"Web/Media/HTML_media": {
"modified": "2020-01-27T09:41:23.530Z",
"contributors": ["germain", "rachelandrew", "Sheppy"]
"Web/Media/Guides/Images": {
"modified": "2020-07-28T00:42:48.458Z",
"contributors": ["lbd1607", "Sheppy", "rachelandrew"]
},
"Web/Media/Streaming": {
"Web/Media/Guides/Streaming": {
"modified": "2020-10-12T00:53:55.010Z",
"contributors": ["krankj", "catecate", "Sheppy"]
},
"Web/Media/images": {
"modified": "2020-07-28T00:42:48.458Z",
"contributors": ["lbd1607", "Sheppy", "rachelandrew"]
},
"Web/OpenSearch": {
"modified": "2019-10-30T22:44:38.715Z",
"contributors": [
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/alpha/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ As you can see, the color without an alpha channel completely blocks the backgro

- [CSS colors](/en-US/docs/Web/CSS/CSS_colors)
- [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
- [Image file type and format guide](/en-US/docs/Web/Media/Formats/Image_types)
- [Image file type and format guide](/en-US/docs/Web/Media/Guides/Formats/Image_types)
- [Alpha compositing](https://en.wikipedia.org/wiki/Alpha_compositing) on Wikipedia
- [RGBA color model](https://en.wikipedia.org/wiki/RGBA_color_model) on Wikipedia
- [Channel (digital image)](<https://en.wikipedia.org/wiki/Channel_(digital_image)>) on Wikipedia
6 changes: 3 additions & 3 deletions files/en-us/glossary/codec/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ A **codec** (a blend word derived from "**co**der-**dec**oder") is a program, al
## See also

- [Codec](https://en.wikipedia.org/wiki/Codec) on Wikipedia
- [Web video codec guide](/en-US/docs/Web/Media/Formats/Video_codecs)
- [Web audio codec guide](/en-US/docs/Web/Media/Formats/Audio_codecs)
- [Guide to media types and formats on the web](/en-US/docs/Web/Media/Formats)
- [Web video codec guide](/en-US/docs/Web/Media/Guides/Formats/Video_codecs)
- [Web audio codec guide](/en-US/docs/Web/Media/Guides/Formats/Audio_codecs)
- [Guide to media types and formats on the web](/en-US/docs/Web/Media/Guides/Formats)
2 changes: 1 addition & 1 deletion files/en-us/glossary/webm/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: glossary-definition

{{GlossarySidebar}}

**[WebM](/en-US/docs/Web/Media/Formats/Containers#webm)** is a royalty-free and open web video format, which is natively supported in all modern browsers.
**[WebM](/en-US/docs/Web/Media/Guides/Formats/Containers#webm)** is a royalty-free and open web video format, which is natively supported in all modern browsers.

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -225,9 +225,9 @@ Each time the time updates (once per second), we fire this function. It works ou

This gives you a basic idea of how to add custom player functionality to video/audio player instances. For more information on how to add more complex features to video/audio players, see:

- [Audio and video delivery](/en-US/docs/Web/Media/Audio_and_video_delivery)
- [Video player styling basics](/en-US/docs/Web/Media/Audio_and_video_delivery/Video_player_styling_basics)
- [Creating a cross-browser video player](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player)
- [Audio and video delivery](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery)
- [Video player styling basics](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics)
- [Creating a cross-browser video player](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player)

We've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it. See [custom-controls-oojs](https://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) (also [see the source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/custom-controls-OOJS)).

Expand Down Expand Up @@ -323,7 +323,7 @@ This will result in a video that has subtitles displayed, kind of like this:

![Video player with standard 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)

For more details, see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can find [the example](https://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on GitHub, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.
For more details, see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can find [the example](https://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on GitHub, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

> [!NOTE]
> Text tracks and transcriptions also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ They generally fall into two categories.
This is how [Google Maps](https://www.google.com/maps) is able to find your location and plot it on a map.
- The [Canvas](/en-US/docs/Web/API/Canvas_API) and [WebGL](/en-US/docs/Web/API/WebGL_API) APIs allow you to create animated 2D and 3D graphics.
People are doing some amazing things using these web technologies — see [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome) and [webglsamples](https://webglsamples.org/).
- [Audio and Video APIs](/en-US/docs/Web/Media/Audio_and_video_delivery) like {{domxref("HTMLMediaElement")}} and [WebRTC](/en-US/docs/Web/API/WebRTC_API) allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple [Snapshot demo](https://chrisdavidmills.github.io/snapshot/) to get the idea).
- [Audio and Video APIs](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery) like {{domxref("HTMLMediaElement")}} and [WebRTC](/en-US/docs/Web/API/WebRTC_API) allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple [Snapshot demo](https://chrisdavidmills.github.io/snapshot/) to get the idea).

**Third party APIs** are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

Expand Down
Loading