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

Аудио и Видео

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

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

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

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

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

* * *

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


Аудио

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


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

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


Видео

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


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


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

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

К примеру, видео, что вставлено здесь, имеет вот такой код вставки:

<iframe width="640" height="360" src="http://www.youtube.com/embed/6-FzTG1YCHc?list=PLrCWaCSWzvLE-YWE77ZCsCF-o9WfZq1Qz" frameborder="0" allowfullscreen></iframe>

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

**И кстати!  Атрибут "src" у меня указан со значением протокола "http", а сейчас дают защищённый "https".  Работает отлично(!) и так, и эдак.

НО!

В данном случае мне нужны были все видео-файлы этого автора по этой теме.

А вот если бы мне понадобилось сделать возможность просмотра только одного видео, то код подключения выглядел бы иначе.

Я бы убрал из полученного на сервисе кода большую часть его, дописав вручную запрет показывать другие видео.

И выглядел бы такой переделанный код вставки уже так:

<iframe width="640" height="360" src="http://www.youtube.com/embed/
6-FzTG1YCHc?/rel=0" frameborder="0" allowfullscreen></iframe>

Как видите, после идентификатора первого видео-файла и символа "?" я поставил правый слэш "/", и, удалив адрес листа, прописал команду "rel=0", которая указывает браузеру: "дальше показывать не нужно".

Честно говоря, именно так в большинстве случаев и поступаю: обрезаю НЕ нужные мне видео-файлы.
**Почему, собственно, я должен рекламировать со своего сайта всё подряд?!

Думаю, что и Вам не очень нравится, когда после видео, которое вставили Вы, YouTube начинает предлагать посмотреть какие-то другие, незнакомые.

Надеюсь, данная информация поможет справиться со "своеволием" этого сервиса.

Но учтите!  Популярная CMS WordPress, к примеру, переделает Ваш исправленный вставленный код вот в такой:

[youtube https://www.youtube.com/watch?v=6-FzTG1YCHc?/rel=0&w=640&h=360]

К тому же!  Реклама других видео всё равно в нём останется. Пробовал!
Можете сами посмотреть на моём тренировочном тестовом блоге, сделанном на этой CMS. Он здесь: "Сайты на WordPress" (откроется в новом окне).

Там, на странице "Тренировка", найдёте ещё много чего интересного о вставке разных кодов в этот движок.

Ну, а здесь скажу лишь, что это главная из причин, почему мне больше всего нравятся простые сайты, созданные вручную!

* * *

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

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

* * *

Дальше посмотрите другие примеры работы с мультимедийным контентом.


Галереи

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

Галерея

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

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


Слайд-шоу

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

Слайд-шоу

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

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

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

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

* * *

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

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


Заключение

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


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

ВВЕРХ

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

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