Видео и встроенные демонстрации

Видео и встроенная демонстрация могут показать процесс, который трудно передать одним снимком. Одновременно они приносят собственные размеры, управление и загрузку. Если вставить такой объект в статью без договора, он может занять слишком много места, вытолкнуть объяснение или остаться пустой областью при отсутствии ресурса.

В этом уроке вы подготовите медиа-компонент для reading-lab, взяв итог шестнадцатой главы. Основной пример останется честным текстовым прототипом. Видеофайл нужно создать самостоятельно, а отдельная CSS-демонстрация будет предоставлена как обычный локальный HTML без стороннего сервиса.

Медиа продолжает объяснение

Видеоурок внутри статьи должен иметь конкретную учебную роль. Например, он показывает изменение ширины окна и поведение одного листинга. Такой фрагмент дополняет объяснение механизма. Длинная запись всего рабочего процесса не обязательно полезнее: читателю приходится искать нужный момент и различать действия, которые не относятся к теме.

Перед объектом кратко назовите, что предстоит увидеть. После него объясните существенное наблюдение. Эта связь сохраняет преподавательскую последовательность. Один большой плеер с заголовком «Смотрите видео» не передаёт, какой вопрос решает фрагмент и можно ли продолжить без его просмотра.

Видео также не становится доказательством результата настоящего ProfessorWeb само по себе. Если вы записали учебный макет, подпись должна называть его. В нашей серии не создавались записи исполнения, поэтому нельзя добавлять фиктивный кадр с якобы проверенной производительностью. Прототип показывает форму блока, а не выполненную работу.

Встроенная демонстрация отличается от видео возможностью менять состояние. Для неё нужно отделить действия внутри объекта от навигации статьи. Читатель не должен терять текстовую позицию только потому, что нажал элемент учебного примера. Размер и подпись помогают показать границу двух интерфейсов.

Прототип без отсутствующего файла

После существующего рисунка в разделе addresses можно добавить следующий полный фрагмент:

<figure class="lab-media">
  <div class="lab-media-prototype">Прототип видео: изменение ширины статьи и локальная прокрутка кода</div>
  <figcaption>Место для собственной записи reading-lab. Видео ещё не предоставлено.</figcaption>
</figure>

Здесь новые классы определяются полным файлом lesson-21.css:

.reading-lab .lab-media { margin: 1.5rem 0; max-width: 100%; }
.reading-lab .lab-media video { display: block; width: 100%; height: auto; background: var(--lab-soft); }
.reading-lab .lab-media iframe { display: block; width: 100%; height: 22rem; border: 0; border-radius: var(--lab-radius); background: var(--lab-surface); }
.reading-lab .lab-media figcaption { color: var(--lab-muted); font-size: .875rem; line-height: 1.55; margin-block-start: .5rem; }
.reading-lab .lab-media-prototype { min-height: 15rem; padding: 1.5rem; display: grid; place-items: center; text-align: center; background: var(--lab-soft); border-radius: var(--lab-radius); }
.reading-lab .lab-media-link { display: inline-block; margin-block-start: .75rem; }

Ожидается самостоятельная область с понятной подписью. Она сохраняет ширину статьи и не притворяется работающим плеером: в ней нет декоративной кнопки запуска. Если ресурс ещё не предоставлен, обычный текст точнее передаёт состояние, чем картинка с ложным действием.

Минимальная высота относится только к прототипу. Она помогает обсудить композицию, но не задаёт пропорцию любого будущего видео. У настоящего ресурса размеры должны отражать его кадр. Вертикальное видео и горизонтальная демонстрация могут требовать разного места при одной ширине.

Собственная запись

После предоставления media/reading-demo.mp4 и подходящего файла субтитров замените прототип следующим ресурсным вариантом:

<video controls preload="metadata" width="1200" height="675">
  <source src="media/reading-demo.mp4" type="video/mp4">
  <track kind="captions" src="media/reading-demo-ru.vtt" srclang="ru" label="Русские субтитры" default>
  Ваш браузер не показывает этот видеоплеер.
</video>
<p><a class="lab-media-link" href="media/reading-demo.mp4">Открыть собственный видеофайл</a></p>

Числа являются договором условной записи с этой пропорцией. Они не подтверждают создание файла. Субтитры должны соответствовать содержанию вашего видео, а не быть пустым ресурсом ради атрибута. Текстовая расшифровка рядом с материалом полезна также для быстрого поиска нужного действия; её подробное устройство относится к курсу доступности.

preload является подсказкой браузеру, а не гарантией точного объёма предварительной загрузки. Вариант metadata показывает намерение не получать весь файл заранее; ограничения описаны в MDN для video. Не добавляем автоматическое воспроизведение: оно изменило бы ожидаемое начало чтения и взаимодействие с другими объектами.

Отдельная CSS-демонстрация

В учебной папке предоставлен lesson-21-demo.html: он показывает обычный абзац и техническую строку внутри собственной ограниченной области. Его можно открыть отдельно. Для размещения внутри статьи используйте следующий фрагмент вместо текстового прототипа:

<iframe src="lesson-21-demo.html" title="Учебный пример ограниченной ширины текста" loading="lazy" sandbox></iframe>
<p><a class="lab-media-link" href="lesson-21-demo.html">Открыть CSS-пример отдельно</a></p>

Пустой sandbox применяет ограничения к вложенному документу; наш пример не требует скриптов, форм или внешних переходов. Атрибут loading позволяет отложить получение iframe, а title называет объект. Их устройство описано в MDN для iframe. Для другого, действительно интерактивного примера разрешения потребуется определить отдельно.

Высота 22rem относится к ограниченному учебному содержанию. CSS родительской страницы не должен предполагать, что любой внешний сайт уместится в эту область. У отдельного документа может появиться собственная прокрутка. Прямая ссылка сохраняет возможность читать его вне рамки, если вложенный вариант неудобен.

Встраивание чужого сервиса также меняет ресурсные и интерфейсные условия. Нельзя копировать плеер неизвестного происхождения только потому, что он красиво заполняет прямоугольник. Для самостоятельного стенда используем локальный документ и явный ресурсный договор, не добавляя внешние зависимости.

Граница вложенного объекта становится особенно важной на маленьком экране. Если внутри рамки есть своя вертикальная прокрутка, а вокруг — длинная статья, человек получает два направления движения. Это не всегда ошибка, но такой пример должен быть коротким и иметь ясное назначение. Для большого интерфейса отдельное открытие может оказаться удобнее, чем увеличение высоты рамки до нескольких экранов.

У видео также есть два уровня продолжения: движение по самой статье и временная шкала записи. Подпись с темой помогает вернуться к нужному объекту, а краткое объяснение рядом показывает, что именно относится к текущему примеру. Не требуйте обязательного просмотра длинного ролика ради одного условия, которое можно назвать обычным предложением. Медиа должно добавлять наблюдаемую деталь, а не заменять последовательное объяснение.

Рассмотрите состояние, когда у читателя ресурс не загрузился. Сама статья должна оставаться понятной: назначение фрагмента названо, а рядом есть текстовая информация и прямой маршрут к собственному файлу или отдельному примеру. Это не гарантирует доступность любого видео, но задаёт композиционную устойчивость. Для действующей публикации содержательная расшифровка и соответствующие альтернативы потребуют отдельной подготовки; текст «тут будет видео» не является такой альтернативой.

Ограничения композиции

Представьте два плеера подряд с длинными подписями. Основное объяснение может потерять непрерывность. Сначала решите, действительно ли оба нужны на одной странице. Иногда один короткий фрагмент и обычный текст передают задачу яснее, чем целая видеотека внутри урока.

Также различайте загрузку и завершённый результат. Пустая область не должна получать подпись «Демонстрация работает», если ресурс недоступен. Для рабочего интерфейса потребуются понятные состояния и текстовая альтернатива. В нашем прототипе состояние названо прямо.

После этого урока у статьи есть согласованная форма для собственного видео и локального вложенного примера. Она сохраняет границу между объяснением и медиа. В следующей главе перейдём от одного материала к странице, которая показывает структуру целой учебной серии.