Доброго времени суток, гости моего обучающего блога и любимые подписчики. Сегодня мы с вами будем программировать свой собственный видеоплеер для сайта. Звучит сложно, но поверьте, после прочтения текущей публикации вы легко сможете реализовать его самостоятельно.
А для этого я расскажу вам, какие элементы языка разметки html и новой спецификации html5 следует использовать, как изменить стилевое оформление видеоплеера и конечно же приведу код программы. Давайте приступим!
Короткий путь к получению видео
Самый простой способ установки видео на сайт – это использовать готовые плагины видеоплееров. На сегодняшний день таких дополнений пруд пруди во Всемирной паутине: с уникальными дизайном контролов, с плейлистами, с дополнительными элементами управления и т.д. Вам остается только найти подходящий для себя плеер, скачать установочные файлы на компьютер и подключить к своему проекту.
К тому же есть и другая возможность простой вставки видео. Думаю, каждый из вас видел такую картину, когда на веб-сервисе запускаются видео с YouTube. Так вот это достаточно простой «финт ушами» для разнообразия своего контента роликом и при этом с минимальным количеством затрачиваемых усилий.
НО! Всегда есть и негативные стороны на коротком и простом пути к внедрению видеофайлов. Используя такие варианты решения, вы ограничиваете свой сайт и себя в выборе дизайна видеоплееров.
Так, видео с YouTube нельзя видоизменить. У вас на странице будет висеть плеер с абсолютно стандартным оформлением, в котором вы сможете менять только размер окна. С плагинами дело обстоит аналогично.
К тому же при открытии вашего веб-ресурса будут подгружаться и подключаемые скрипты скачанных плагинов, а это повлияет на скорость загрузки.
Поэтому я расскажу, как реализовать свой собственный видеоплеер с подходящим для вас дизайном и размером.
Реализация персонального видеоплеера
Чтобы создать приложение для проигрывания видеороликов, необходимо для начала познакомиться с такими тегами html5, как <video> и <source>.
Video
Данный элемент используется для воспроизведения файлов в различных видеоформатах. Он обладает несколькими встроенными атрибутами, которые я перечислил в таблице.
| Атрибут | Предназначение |
| Controls | Добавляет панель управления. |
| Autoplay | После загрузки веб-страницы видео стартует автоматически. |
| Height | Устанавливает высоту окна, в котором воспроизводится видео. |
| Loop | Зацикливает показ ролика. |
| Poster | Пока видео не запущено или в случае если оно недоступно, отображается картинка (постер). |
| Preload | Во время загрузки сайта загружается и сам видеоролик. |
| Src | Отвечает за адрес ролика. |
| width | Устанавливает ширину окна, в котором воспроизводится видео. |
Source
Данный тег используется для вставки необходимых файлов (аудио или видео) в элементы <audio> и <video>.
Для source создателями языка было предусмотрено всего лишь 3 атрибута:
- Media – используется для определения устройства, на котором запускается мультимедиа. Используется не очень часто;
- Src – отвечает за адрес вставляемого файла;
- Type – указывает типы данных (MIME-типы) источников.
Вот теперь с полученными знаниями о коде можно приступать к созданию видеоплеера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
<style>
body {
background: #8B7355;
}
video {
max-width: 50%;
margin-left:25%;
border: 2px solid #8B4513;
}
h2 {
text-align: center;
color: #8B4513;
}
</style>
</head>
<body>
<video id="movie" controls poster="http://datakogda.ru/wp-content/uploads/2015/07/Kogda-vyydet-Graviti-Folz-3-sezon-data-vykhoda.jpg" preload="none">
<source src="… " type='video/mp4'> /*на месте этой ссылки вы вставите путь к своему видеофайлу*/
</video>
<h2>Ссылка для скачивания видео
здесь.</h2>
<script>
var v = document.getElementById("movie");
document.getElementById("movie").volume = 0.5;
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
</body>
</html> |
Желаю вам удачи в создании собственного плеера. Подписывайтесь на мой блог и не забывайте рассказывать о нем своим знакомым и друзьям. До встречи! Пока-пока!
С уважением, Роман Чуешов
Не знал, что самому можно плеер ставить на сайт безо всяких плагинов. Про тег source знал, он часто используется, а про тег video не знал. Что плохо, долго на каждую страницу код ставить и если статью придётся дополнять, то надо кодом и плеер сдвигать.
Плеер как я понял, под браузерами с html5 работает, а с html4 и ниже не будут. Не понял, если поставить ссылку в свой плеер с ютуб, дизайн плеера сменится на стандартный ютубовский или своим останется?
Ютубовский будет.
Плохо, если на ютубовском. Значит придётся хранить видеофайл не на ютуб, а в другом месте, только каком? На свой хостинг много видео не выложишь, ну и нагрузка на хостинг возрастёт, если на нём своё видео разместить.
Если много видосов то ютуб однозначно. Ну, не знаю, плеер ютуба меня устраивает польностью.
как сделать плейлист и возможно ли отображение перекрывающегося контента HTML 5