Атрибут src тега <video> — адреса відеофайла на сторінці
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<video src="URL">Атрибут src може отримувати єдине значення:
-
URL -
URL відеофайлу.
Можливі значення:
- Абсолютний URL - вказує на інший веб-сайт (наприклад, src="http://www.example.com/movie.ogg").
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, src="movie.ogg").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
П'ять теґів video без жодного відеофайла. Перший показує типову коробку 300×150, другий — що постер задає розмір навіть при зламаній адресі, третій — що текст усередині теґа при збої не з'являється, четвертий — що src на самому теґу вимикає дочірні source. У п'ятого є controls — і лише він показує повідомлення про непідтримуваний формат: у перших чотирьох збій мовчазний. Червоний пунктир окреслює справжні межі кожної коробки.
HTML
<p class="cap">1. Зламаний src без постера — типові 300×150 і порожньо</p>
<video src="nemaye-takogo-fajla.mp4"></video>
<p class="cap">2. Той самий зламаний src, але з постером 240×90 — коробка взяла розмір постера</p>
<video src="nemaye-takogo-fajla.mp4"
poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='90'%3E%3Crect%20width='240'%20height='90'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='120'%20cy='45'%20r='22'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<p class="cap">3. Текст усередині теґа при збої не показується — коробка лишається порожньою</p>
<video src="nemaye-takogo-fajla.mp4">Ваш браузер не підтримує відео</video>
<p class="cap">4. src на самому теґу — джерела нижче браузер навіть не розглядає</p>
<video src="nemaye-takogo-fajla.mp4">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
</video>
<p class="cap">5. Так пишуть, коли форматів кілька: без src на теґу, лише source. І заразом
видно, що повідомлення про збій показує саме controls — у теґів вище його немає</p>
<video controls width="240"
poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='90'%3E%3Crect%20width='240'%20height='90'%20fill='%2372b043'/%3E%3Ccircle%20cx='120'%20cy='45'%20r='22'%20fill='%23ffffff'/%3E%3C/svg%3E">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
</video>CSS
.cap {
margin: 20px 0 6px;
max-width: 620px;
color: #5a6472;
font-size: .92em;
}
video {
display: block;
outline: 2px dashed #d64545;
outline-offset: 2px;
background: #eef1f5;
}<p>Адресу файла ставлять просто в <code>src</code> самого <code><video></code> — це найкоротший запис, коли формат один. Файла в цій демонстрації немає, тож нижче — плеєр із заглушкою в <code>poster</code>: видно рамку, задані розміри й панель керування.</p>
<video controls width="320" height="180" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не підтримує відео.
</video>Різниця між HTML 4.01 та HTML5
Атрибут src з'явився тільки у HTML5.
Різниця між XHTML та HTML
У XHTML атрибут minimization заборонений, а атрибут muted повинен бути визначений як <video muted ="muted ">.
Коментарі
Коментарів ще немає — будьте першим!