Web-Programming.in.ua

Додавання відео на сторінку HTML5

Усім привіт. Напевно кожен хто вчиться розробляти сайти задає собі питання, як розмістити відео на web-сторінці і при цьому не використовувати сторінні відео-хостинги? В цьому уроці я покажу приклад, як це реалізувати за допомогою нових можливостей HTML5.

Вимоги:

  • браузер, який підтримує HTML5. Ви можете перевірити свій браузер на сайті http://caniuse.com/#search=video.
  • відео в форматі mp4

Напишемо наступний код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Video Player</title>
    <style>
        body {
                font-family: sans-serif;
                border: 0;
                margin: 0;
                padding: 0;
        }
        header {
                text-align: center;
        }
        #player {
                display: table;
                width: 100%;
                padding: 4px;
                text-align: center;
        }
        #player > div {
                display: table-cell;
                vertical-align: top;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 Video Player</h1>
    </header>
    <section id="player">
        <div>
                <!-- video -->
        </div>
    </section>
</body>
</html>

Відео вставляється за допомогою тегу "<video>".

<video src="шлях/до/відео.mp4" controls width="720" height="480">
    Ваш браузер не підтримує HTML5 відео.
</video>

В цьому прикладі "src" - шлях до відео, "controls" - означає, що повинні бути базові елементи управління, "width/height" - ширина/висота відео.

Результат:

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору