mdn · sashasushko · Nov 16, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
@@ -13,6 +13,8 @@ If you place content outside of this explicit grid, or if you are relying on aut
 
 В примере ниже отображена _точная сетка_ из трёх колонок и двух рядов. The _third_ row on the grid is an _implicit grid_ row track, formed due to their being more than the six items which fill the explicit tracks.
 
+## Пример
+
 ```css hidden
 * {
   box-sizing: border-box;
@@ -54,7 +56,7 @@ If you place content outside of this explicit grid, or if you are relying on aut
 </div>
 ```
 
-{{ EmbedLiveSample('example', '500', '330') }}
+{{ EmbedLiveSample('Пример', '500', '330') }}
 
 ## Дополнительные материалы
 
@@ -67,4 +69,4 @@ If you place content outside of this explicit grid, or if you are relying on aut
 
 ### Что почитать ещё
 
-- Руководство по CSS Grid: _[Базовые принципы CSS сеток](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_
+- Руководство по CSS Grid: _[Базовые принципы CSS сеток](/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
@@ -16,8 +16,6 @@ slug: Web/API/Canvas_API/Tutorial/Compositing
 
 См. [примеры компоновки](/ru/docs/Web/API/Canvas_API/Tutorial/Compositing/Example) кода из следующих примеров.
 
-{{ EmbedLiveSample("Compositing_example", "100%", 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example" )}}
-
 ## Обрезка контуров
 
 ![](canvas_clipping_path.png)Отсечённый контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.
@@ -99,6 +97,6 @@ draw();
 
 Все, что нарисовано после создания отсечённого контура, появится только внутри этого пути. Вы можете видеть это чётко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звёзд, используя `drawStar()`. Снова звезды появляются только в пределах определённого обтравочного контура.
 
-{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
+{{EmbedLiveSample("Пример_обрезки", 180, 190, "canvas_clip.png")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
@@ -7,7 +7,9 @@ slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
 
 В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}}) в качестве источника потока `MediaStream` для его записи. В этой статье рассматривается пример выполняющий это.
 
-## HTML содержимое
+## Пример записи с помощью медиа элемента
+
+### HTML
 
 ```html hidden
 <p>
@@ -101,11 +103,11 @@ h2 {
 }
 ```
 
-## JavaScript
+### JavaScript
 
 Теперь давайте посмотрим на код JavaScript
 
-### Установка глобальных переменных
+#### Установка глобальных переменных
 
 Мы начнём с установления некоторых глобальных переменных, которые нам понадобятся.
 
@@ -122,7 +124,7 @@ let recordingTimeMS = 5000;
 
 Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, `recordingTimeMS`, установлена на 5000 миллисекунд (5 секунд);.
 
-### Используемые функции
+#### Используемые функции
 
 Далее мы создадим несколько служебных функций, которые будут использованы позже.
 
@@ -142,7 +144,7 @@ function wait(delayInMS) {
 
 The `wait()` function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an [arrow function](/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.
 
-### Starting media recording
+#### Starting media recording
 
 The `startRecording()` function handles starting the recording process:
 
@@ -173,9 +175,9 @@ function startRecording(stream, lengthInMS) {
 - Line 2
   - : Creates the `MediaRecorder` that will handle recording the input `stream`.
 - Line 3
-  - : Creates an empty array, `data`, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder.ondataavailable", "ondataavailable")}} event handler.
+  - : Creates an empty array, `data`, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder/dataavailable_event", "ondataavailable")}} event handler.
 - Line 5
-  - : Sets up the handler for the {{event("dataavailable")}} event. The received event's `data` property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the `Blob` onto the `data` array.
+  - : Sets up the handler for the {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} event. The received event's `data` property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the `Blob` onto the `data` array.
 - Lines 6-7
   - : Starts the recording process by calling {{domxref("MediaRecorder.start", "recorder.start()")}}, and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.
 - Lines 9-12
@@ -185,7 +187,7 @@ function startRecording(stream, lengthInMS) {
 - Lines 18-22
   - : These lines create a new `Promise` which is fulfilled when both of the two `Promise`s (`stopped` and `recorded`) have resolved. Once that resolves, the array data is returned by `startRecording()` to its caller.
 
-### Stopping the input stream
+#### Stopping the input stream
 
 The `stop()` function simply stops the input media:
 
@@ -197,7 +199,7 @@ function stop(stream) {
 
 This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.
 
-### Getting an input stream and setting up the recorder
+#### Getting an input stream and setting up the recorder
 
 Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:
 
@@ -238,7 +240,7 @@ startButton.addEventListener(
 );
 ```
 
-When a {{event("click")}} event occurs, here's what happens:
+When a {{domxref("Element/click_event", "click")}} event occurs, here's what happens:
 
 - Lines 2-4
   - : {{domxref("navigator.mediaDevices.getUserMedia()")}} is called to request a new {{domxref("MediaStream")}} that has both video and audio tracks. This is the stream we'll record.
@@ -248,7 +250,7 @@ When a {{event("click")}} event occurs, here's what happens:
   - : When the preview video begins to play, we know there's media to record, so we respond by calling the [`startRecording()`](#starting_media_recording) function we created earlier, passing in the preview video stream (as the source media to be recorded) and `recordingTimeMS` as the number of milliseconds of media to record. As mentioned before, `startRecording()` returns a {{jsxref("Promise")}} whose resolution handler is called (receiving as input an array of {{domxref("Blob")}} objects containing the chunks of recorded media data) once recording has completed.
 - Lines 11-15
 
-  - : The recording process's resolution handler receives as input an array of media data `Blob`s locally known as `recordedChunks`. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is `"video/webm"` by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's [`src`](/ru/docs/Web/HTML/Element/video#src) attribute (so that you can play the video from the blob) as well as the target of the download button's link.
+  - : The recording process's resolution handler receives as input an array of media data `Blob`s locally known as `recordedChunks`. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is `"video/webm"` by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's [`src`](/ru/docs/Web/HTML/Element/video#src) attribute (so that you can play the video from the blob) as well as the target of the download button's link.
 
     Then the download button's [`download`](/ru/docs/Web/HTML/Element/a#download) attribute is set. While the `download` attribute can be a Boolean, you can also set it to a string to use as the name for the downloaded file. So by setting the download link's `download` attribute to "RecordedVideo.webm", we tell the browser that clicking the button should download a file named `"RecordedVideo.webm"` whose contents are the recorded video.
 
@@ -257,9 +259,9 @@ When a {{event("click")}} event occurs, here's what happens:
 - Line 20
   - : The `catch()` for all the `Promise`s outputs the error to the logging area by calling our `log()` function.
 
-### Handling the stop button
+#### Handling the stop button
 
-The last bit of code adds a handler for the {{event("click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:
+The last bit of code adds a handler for the {{domxref("Element/click_event", "click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:
 
 ```js
 stopButton.addEventListener(
@@ -277,7 +279,7 @@ This simply calls the [`stop()`](#stopping_the_input_stream) function we covered
 
 When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:
 
-{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}
+{{ EmbedLiveSample("Пример_записи_с_помощью_медиа_элемента", 600, 440) }}
 
 You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.
 

@@ -47,6 +47,8 @@ mix-blend-mode: unset;
 
 ## Примеры
 
+### Влияние различных значений режима смешивания
+
 ```html hidden
 <div class="grid">
   <div class="col">
@@ -624,7 +626,7 @@ body {
 }
 ```
 
-{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("Влияние_различных_значений_режима_смешивания", "100%", 1600)}}
 
 ### Пример HTML
 

@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/attributeName
 
 Четыре элемента используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -31,7 +33,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample("topExample", "400", "250")}}
+{{EmbedLiveSample("Пример", 400, 250)}}
 
 ## Контекст использования
 

@@ -7,10 +7,12 @@ slug: Web/SVG/Attribute/d
 
 Атрибут **`d`** предоставляет определение пути для рисования.
 
-Определение пути - это [список команд пути](#Path_commands), в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.
+Определение пути - это [список команд пути](#path_commands), в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.
 
 Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -32,7 +34,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample('Example', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## path
 

@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/dur
 
 Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -40,7 +42,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample("topExample", "220", "150")}}
+{{EmbedLiveSample("Пример", 220, 150)}}
 
 ## Примечания к использованию
 

@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/id
 
 Этот атрибут используется всеми элементами.
 
+## Пример
+
 ```html
 <svg
   width="120"
@@ -28,7 +30,7 @@ slug: Web/SVG/Attribute/id
 </svg>
 ```
 
-{{EmbedLiveSample("topExample", "120", "120")}}
+{{EmbedLiveSample("Пример", 120, 120)}}
 
 ## Примечания по использованию
 

@@ -7,6 +7,8 @@ slug: Web/SVG/Attribute/r
 
 Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -40,7 +42,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## circle
 

@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/rx
 
 Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -29,7 +31,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## ellipse
 

@@ -9,6 +9,8 @@ slug: Web/SVG/Attribute/ry
 
 Два элемента используют этот атрибут: [`<ellipse>`](/ru/docs/Web/SVG/Element/ellipse) и [`<rect>`](/ru/docs/Web/SVG/Element/rect)
 
+## Пример
+
 ```css hidden
 html,
 body,
@@ -29,7 +31,7 @@ svg {
 </svg>
 ```
 
-{{EmbedLiveSample('topExample', '100%', 200)}}
+{{EmbedLiveSample("Пример", '100%', 200)}}
 
 ## ellipse