Блиц-опрос

Ваше мнение очень важно для автора сайта! Оцените дизайн и контент сайта:

Круто - 50%
Нормалёк - 18.8%
И так сойдет - 18.8%
Полный отстой - 12.5%

Проголосовали: 16
Голосование для этого опроса закончилось on: 31 Дек 2017 - 00:00

Аудио и видео на сайте

1

Наверняка вы сталкивались на страницах различных сайтов с видео-уроками, видео-инструкциями и т. д. И наверняка первая мысль была — «как круто! Вот бы и мне сделать такое». Собственно, цель данной статьи как раз и состоит в том, чтобы ввести вас в курс дела, «в тему», что называется. Самое странное, что одного, единственного и надежного способа вставки аудио и видео на страницах сайта нет. Давайте все проясним. Многое зависит от того, что из себя представляет ваш сайт? Если он сделан на HTML, то один вариант вставки, если на каком-либо движке, то другой (но в принципе, есть разные варианты). Как часто бывает так, что сталкиваясь с какой-нибудь проблемой, относящийся к сайту на движке, обнаруживаешь, что уже есть готовые решения. В любом случае нужно понимать, что для вставки и просмотра медиа-файлов нужны как минимум сами файлы а так же сам проигрыватель (попросту говоря визуализированный проигрыватель — «картинка»), который часто называют «сборкой».

Если брать частный случай — сайт на движке Joomla, то самое простое решение — найти и загрузить необходимое расширение. В моем случае — это плагин jw_allvideos. Этот плагин как раз и обеспечивает простой способ вставки звукового или видео-файла в текст страницы сайта. Все, что нужно сделать — это найти и скачать архив плагина и в административной панели сайта загрузить плагин (добавить расширение). Понятно, что плагин нужно еще и настроить, что совсем не трудно. Все как обычно. Итак, для данного сайта я именно все так и сделал.Теперь посмотрит, будет ли все это работать.

Для начала найдем у себя на компьютере какой-нибудь аудио и видео-файл. Я выбрал из своей коллекции файл dis.mp3 — песня Desireless «L'amour, L'amour» объемом 6.27 Mb и видео-фрагмент из фильма «Укрощение строптивого» с Андриано Челентано (помните, как он давил виноград!) — ch100.mp4 объемом 11.8 Mb (и плюс копия ch101/mp4). Теперь эти файлы нужно куда-то поместить. В настройках плагина jw_allvideos прописаны пути к таким файлам по умолчанию images/audio и images/videos. Далее я создал в папке images своего сайта две папки с именами audio и videos. Соответственно закачал файлы в эти папки (песню — в audio, а видео — в videos). Теперь попробуем вставить наше аудио и видео в текст данной статьи. Поехали!

Вставка аудио на данной странице сайта

Все, что нужно для вставки аудио на странице сайта на движке Joomla с плагином jw_allvideos — это вставить в нужном месте страницы весьма странную конструкцию:

Ну-ка посмотрим, что получилось?


Какие бывают виды бандажей http://tvoy-bandazh.ru/

В моем случае dis — это как раз мой звуковой файл dis.mp3. С отступами, пробелами и позиционированием плеера разберетесь сами — все меняется в настройках плагина. Итак, проверяем — все работает!

Вставка видео на данной странице сайта

Идем дальше и вставляем видео. Опять же все, что нужно для вставки видео-фрагмента на странице сайта на движке Joomla с плагином jw_allvideos — это вставить в нужном месте страницы тоже странную конструкцию:

Плеер появился.


Какие бывают виды бандажей http://tvoy-bandazh.ru/

Проверяем — работает! К сожалению, вставка первого кадра (картинка в проигрывателе перед воспроизведением) невозможна. Вот так все работает на сайте Joomla. А теперь попробуем вставить на странице сайта видео средствами HTML.

Вставка видео c помощью HTML тега <video>

Сейчас я вставлю в этом месте статьи нужные теги::

При помощи атрибута тега параграфа разместил плеер по центру. А теперь смотрим — все работает!

Все получилось, даже вставил first frame (первый кадр frame.jpg).Заметили, что параметры визуально проигрывателя прописываются в виде атрибутов тега <video>? Обычно говорят о том, что такой способ вставки видео с помощью тега стал возможным с появлением новых версий HTML. Сразу возникает вопрос — а как же «сборка» проигрывателя? Она просто прошита в конкретном браузере. Понятно, что выглядит она по-разному в разных браузерах (и даже в браузере разных версий)

Вставка видео c удаленных серверов

Собственно это самый простой способ. К примеру в Ютуб есть возможность вставить видео на своем сайте. Для этого достаточно в нужном месте на странице сайта вставить предлагаемый фрагмент HTML кода. Правда в этом случае сам медиа-файл находится на сервере Ютуба со всеми вытекающими последствиями типа сообщения «видео удалено по просьбе правообладателя» или что-то вроде этого.

Понятно, что вставлять фрагмент нужно в режиме работы визуального редактора — HTML.И еще я откорректировал размеры плеера.И скорее всего, нужно будет в общих настройках сайта включить режим [Без редактора].

А как же play-lists?

Опять же, одного готового решения нет. А штука-то заманчивая — сделать галерею своих домашних фотографий, музыкальных композиций, клипов и проч. Возможное решение для «любителя» — найти нужные программы. Посоветовать лучшее решение я не могу. Но можно попробовать воспользоваться программой flowplayer. Саму программу в виде файлов и папок придется загружать на удаленный сервер прямо в корневую папку сайта. Да и настройка программы достаточно сложная. Это как вариант. В данной обзорной статье я лишь дал некоторые представления о техники вставки медиафайлов на сайте. К сожалению сама проблема изобилует различными нюансами и особенностями. Но это находится за рамками данной статьи.

Комментарии   

 
Администратор
0 #6 Администратор 25.02.2018 09:23
swetoksv, такого раздела на сайте нет. Если есть проблемы по теме, пишите в комментариях.
Цитировать
 
 
Администратор
0 #5 Администратор 06.05.2017 13:11
Вопрос был задан примерно такой – Какой вэб-хостинг я использую для данного сайта?
Я пользовался всего двумя вэб-хостингами, один был американский, другой – российский. Важно понимать, что хорошо отлаженная служба тех-поддержки имеет немаловажную роль (особенно в части языка). Поэтому желательно пользоваться услугами вэб-хостингов, которые зарегистрирован ы и работают в вашей стране. Рекомендовать конкретных вэб-хостингов я не буду, вы сами должны решать, посмотрите отзыве, ознакомьтесь с условиями.
Цитировать
 
 
see this
0 #4 see this 04.05.2017 04:03
I read this piece of writing completely about the resemblance of newest and preceding technologies, it's remarkable article.
Цитировать
 
 
elamed.info
0 #3 elamed.info 24.04.2017 17:44
Hello would you mind letting me know which webhost you're using?
I've loaded your blog in 3 completely different browsers and I must say this blog loads a lot faster then most.
Can you recommend a good web hosting provider at a reasonable price?
Kudos, I appreciate it!
Цитировать
 
 
Администратор
0 #2 Администратор 20.04.2017 18:30
Предыдущий комментарий я перевёл так - На самом деле, если кто-то не понимает что-то, то здесь он получит помощь.
Убедительная просьба писать комментарии на русском языке, иначе проблемка будет не только у меня, но и у других посетителей, которые тоже читают комментарии. Заранее спасибо.
Цитировать
 
 
Hair Growth Products
0 #1 Hair Growth Products 20.04.2017 11:59
In fact no matter if someone doesn't understand then its up to other visitors that they will help, so
here it occurs.
Цитировать
 

Добавить комментарий

Защитный код
Обновить

Поделитесь с друзьями!

Поиск по сайту