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

Аудио и Видео

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

На 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>

*Prim.   Правда, это уже переделанный мною код (сокращён). Тем не менее, он полностью рабочий.

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

Внимание! Важно! Обратите внимание!

Адрес видео, который сервис даёт, чтоб просто "поделиться" ссылкой, - другой!

Если "по-умолчанию" он - https://youtu.be/WXwElka9Brk, то для вставки на сайт он выглядит уже иначе - https://www.youtube.com/ - домены разные!

Для чего такое делается? Зачем?   Честно говоря, не знаю. Так и не понял. Однако! Если на свой сайт вставить приведённый выше код, заменив в нём youtube.com на youtu.be, что даётся "по-умолчанию", то видео на странице сайта выводиться не будет. Проверял!

И наоборот.

В качестве обычной ссылки - youtu.be - работает, а вот youtube.com - нет!

И это несмотря на то, что кликая по ссылке с youtu.be, пользователь всё равно попадает на адрес youtube.com ... ... ... . Зачем так было сделано?! Зачем?!   Якобы, для сокращения интернет-адреса. Ну ... ... "жираф большой, ему видней".Типа того...

Хорошо хоть идентификатор везде остаётся прежним: WXwElka9Brk.

Конечно, для вставки нужного видео на разные ресурсы гораздо проще пользоваться кодом, который сам появится после клика по соответствующей иконке: "ВКонтакте", "Twitter", "Facebook", и т.д..  Естественно, это проще.

Внимание Однако!
Полученные коды вставки я всё же переделываю!

В качестве примера, расскажу о переделке кода видео с данной страницы. Того, что Вы видели выше.

Мне НЕ нужны были все видео-файлы, что выдаёт "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" (откроется в новом окне).

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

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

* * *

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

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

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

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

* * *

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


Галереи

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

Галерея

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

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


Слайд-шоу

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

Слайд-шоу

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

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

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

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

* * *

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

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


Заключение

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


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

ВВЕРХ

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

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