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

Аудио и Видео

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

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

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

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

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

* * *

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


Аудио

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


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

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


Видео

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

Видео так и называется: "WordPress - уроки для начинающих".


Разумеется, сервис "YouTube" постоянно используется для рекламы чего-либо. И весьма успешно!
Кто смотрел, видели вставленную автором этого видео рекламу себя и своих партнёрских ссылок на ресурс хостера, предоставляющего услуги размещения сайтов в интернете.

Короче, уметь работать с сервисом "YouTube" нужно обязательно!


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

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

Чтобы получить код вставки, кликните по кнопке "поделиться". Подчеркнул её красным. А сам блок кнопок находится сразу же ниже видео (прямо под ним).

Блок кнопок YouTube

После клика по указанной кнопке, Вам на затемнённом фоне откроется форма выбора нужного кода. Красной стрелкой показал ту, что даст HTML-код для сайта.

Форма выбора кода YouTube

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/
WXwElka9Brk?start=0;rel=0" frameborder="0" allowfullscreen></iframe>

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

НО! Внимание Учтите!
Полученный код вставки я переделал!

Мне НЕ нужны были все видео-файлы, что выдаёт "YouTube" после просмотра.

Хотелось вставить видео только этого автора и только по этой теме.

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

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

Команда "start=0" означает, что видео будет показываться с самого начала.  А если бы было нужно воспроизвести с 10-ой минуты, скажем, то поставил бы не "0", а "600", т.к. отсчёт времени ведётся в секундах.

Кстати, с какой(?) секунды начнётся воспроизведение, можно было бы установить сразу, ещё в форме выбора кода, поставив "галочку в чекбокс" на нужном времени.

Можно ... ..., только пришлось бы "ловить момент", а вручную это сделать гораздо проще.

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

Короче, много чего поубирал из кода!

А выглядел полученный, т.е. НЕ переделанный код вставки вот так:

<iframe width="560" height="315" src="https://www.youtube.com/embed/WXwElka9Brk?start=240" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Проще говоря, в таком коде предлагалось ВСЁ РАЗРЕШИТЬ. Всю рекламу сервиса, другие совершенно не нужные мне видео, и т.д., и т.п..

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

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

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

Внимание Важно!

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

[youtube https://www.youtube.com/watch?v=WXwElka9Brk?/rel=0&w=560&h=315]

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

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

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

* * *

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

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

Лично я считаю, что гораздо лучше иметь все файлы на своём сайте. Поскольку, если автор видео вдруг уберёт его с "YouTube", то и на Вашем сайте оно исчезнет!

Кто был на этой странице ранее, знает - раньше здесь было вставлено другое видео.

* * *

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


Галереи

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

Галерея

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

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


Слайд-шоу

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

Слайд-шоу

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

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

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

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

* * *

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

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


Заключение

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


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

ВВЕРХ

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

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