Логотип Валидатор Валидатор Качество создания сайта

Аудио и Видео

Вставка аудио и видео

На HTML-страницу можно вставить любой файл, содержащий аудио или видеозапись.
Это наиболее популярное, массовое увлечение сейчас: "выкладывать" в интернет клипы, фильмы, музыку, анимацию, фотогалереи и т.д..

Применение таких технологий делает страницу сайта привлекательнее, "живее".   Да и вообще, мультимедиа - большое дело! Точно!

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

Если не удаётся запустить аудио с этой, то прослушать музыкальные файлы на любых современных устройствах можно с неё: Аудио и Видео на HTML

* * *

На этой же странице - сначала об аудио и видео, а после о галереях, и слайдерах.
Знаю несколько способов вставки музыки и видео на сайт. Покажу два из них.


Аудио

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


Кстати, этот же плеер, слегка изменив код, можно представить и вот в таком виде, сокращённом. Я не стал подключать его к музыке, просто вывел панель на страницу.

Мне больше нравится полный вариант, но ... ... такая возможность есть.


Видео

Взял отличное(!) видео с "YouTube", и вставил панель его просмотра на страницу своего сайта.
Интереснейшие уроки о создании сайтов на CMS WordPress (от человека у которого учился сам).
Кстати! В первом, вводном уроке, он очень хорошо и наглядно показывает (с 14-той минуты видео), и объясняет, как устроен, и что такое интернет.


Разумеется, сервис "YouTube" постоянно используется для рекламы чего-либо. И весьма успешно!
Так что, уметь с ним работать нужно обязательно.

* * *

Показал два принципиально разных способа вставки аудио и видео на страницы сайта.

В первом случае и сами музыкальные файлы, и плеер находятся у меня на сайте. А вот файлов видео у меня нет. Есть только возможность их просматривать.


Галереи

Создание всевозможных фотогалерей на сайте - тоже непременное условие для его популярности. Лучше один раз увидеть, чем 100 раз прочитать.

Галерея

Желающие посмотреть четыре простые HTML-галереи для сайта в действии, могут это сделать в разделе "Галерея" (откроется в новом окне). Не стал перегружать эту страницу.

Кого интересует анимация, тем сюда: "Анимация" (аналогично).


Слайд-шоу

О том, что создание разных слайдеров для сайта не менее популярное занятие, даже и говорить не стоит. Факт!

Слайд-шоу

Кто хочет посмотреть три простых слайд-шоу для сайта в действии, могут это сделать в разделе "Слайд-шоу на HTML" (откроется в новом окне). Аналогично. Не стал перегружать эту страницу.

Не только посмотреть, но научиться создавать, и подключать 8 видов слайдеров, сможете на странице "Слайд-шоу" (откроется в новом окне).

Последняя, предложенная к просмотру страница, будет особенно интересна людям, изучающим jQuery.
На ней весь процесс создания и подключения слайд-шоу для сайта подробнейшим образом прокомментировал.
P.S.* К тому же, даю там ссылку, где можно получить совершенно бесплатно полный комплект рабочих, проверенных скриптов, использовавшихся для создания слайд-шоу.

Страничка с примерами jQuery и JavaScript

* * *

Очень интересен внутренний сайт-визитка "Личная страничка", где применил самый популярный тип слайдера - "вертушка".

Использовал такое слайд-шоу в качестве эффектного элемента дизайна страницы сайта. Кроме этого, увидите там действие других веб-технологий.


Заключение

Здесь, и на смежной странице, показал Вам свои возможности по работе с мультимедийным контентом сайта.
Надеюсь, что для "Портфолио" показал вполне достаточно.


На учебные сайты

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru