Один из способов вставки видео

Редактировалось: 13 раз — последний 24 июня 2013
Просмотров: 915
Настроение: жара...
Играет: почти тишина
+4
: 4
Добрейшего ВАМ, уважаемые! Столкнулся намедни с проблемой по установки видео роликов на сайты.Здесь на сайте уже описано, как вставить "резиновое" видео на сайт, но с посредником. Вставка "резинового" видео. В этом есть и свои плюсы, вам на сайт -дополнительный трафик и ссылки...Но опять же где гарантии, что ссылка не станет "битой", в связи с "новыми законами"???. Обычно я использовал Silverlight от Microsoft или flash плеера, но в связи с введением нового стандарта, пришлось слегка "ВСЕ" поменять.
Плюс ко всему плагины и расширения в браузерах стали просто НЕ доступны, поэтому не стало гарантий того, что ролик кто-то сможет посмотреть... Насколько осведомлен(?), Мозила до последнего времени бурно сопротивлялась пeред установке в свой браузер кодека H.264... Недавно переустанавливая браузер увидел, что этот кодек предустановлен, наряду с .webm и ogg.В полной мере это все заработает с 22 версии. Во общем не вдаваясь в подробности, можно с уверенностью сказать о том, что вроде как появился "стандартный кодек" для почти всех основных браузеров. То есть речь идет о том, что в нынешних условиях, когда везде ВСЕ запрещают ( и на Youtobe и в Контакте). Вы можете спокойно "небольшие" видео ролики спокойно устанавливать на свой сайт или блог, минуя посредников(естественно вся ответственность по корректности содержания ложится на "ваши плечи"). Самое главное иметь подходящий формат видео, для этого придется качнуть бесплатную утилиту Hamster Free Video Converter (
Скрытый текст виден только зарегистрированным пользователям
). Можно конечно использовать онлайн конвертеры..., (категорически не рекомендую), файлы могут быть заражены и соответственно заблокированы, лучше не рисковать... Но ваше право.
В Hamster Free Video Converter, достаточно ВСЕ просто берем видео, конвертируем, и самое главное выбераем формат - mp4 - Н.264. И все...
Качаем видео на свой сервер и продолжаем нашу установку.Так как я изначально решил отказаться от пред установки на сайты каких либо плееров, соответственно, основная фишка в том, что бы использовать в полной мере плееры, которые предустановлены в браузерах, естественно и их внешний вид...( Вы конечно можете дописать как вам угодно css, то есть "разукрасить" плеер) Но идя самым простым путем допишем всего лишь несколько правил - выставим его(плеер) по центру и пропишем простую рамку:
.trailer{
display:block;
position: relative;
text-align:center;
margin:20px 25px;
}
.block-video{
text-align:center;
padding:0;
}
video{
border:5px solid rgba(130, 130, 130, 0.5);
}
Далее, открываем страницу, куда ВЫ именно хотите вставить ролик и там прописываем:
<div class="trailer">
<div class="block-video">
<video src="/images/video/ВАШ_РОЛИК.mp4" loop controls ></video>
</div>
</div>
src="/images/video/ВАШ_РОЛИК.mp4" - это путь к вашему ролику и его название.
loop controls - это значения панели управления, можно еще добавить autoplay - если необходимо, что бы ролик сразу воспроизводился...
Можно конечно и выставить сразу необходимый формат , дописав в css правила - width:640;, height:480; Тут вам решать...
Далее необходимо решить проблему кросбраузерности, для того, что бы видео работало во всех браузерах.
Для этого придется видео преобразовать еще в два формата - .ogg и .webm
Соответственно эти файлы закачать на сервер и добавить код в файл.Конструкция будет соответственно выглядеть вот так:
<div class="trailer">
<div class="block-video">
<video poster="/images/video/ВАШ_ПОСТЕР.png" loop controls>
<source src="/images/video/ВАШ_РОЛИК.mp4">
<source src="/images/video/ВАШ_РОЛИК.webm">
<source src="/images/video/ВАШ_РОЛИК.ogg">
Ваш браузер не поддерживает тег video.
</video>
</div>
</div>
Тег video в html5 поддерживает показ изображения, которое первым появляется до воспроизведения фильма, поэтому в нашей конструкции появилось: poster="/images/video/ВАШ_ПОСТЕР.png" - думаю здесь все более-менее понятно?!
Теперь можно спокойно любоваться проделанной работой и соответственно НЕ зависеть от посредников, плагинов и нашего горячо... государства и их новых законов по запрещению ВСЕГО и ВСЯ.
Удачи вам и наименьшего встречного движения...!
Вот так в течении трех дней пришлось тестировать и корректировать материал...:
К несчастью информации по данной теме очень мало, а та которая существует-УСТАРЕЛА. Поэтому, из последних тестов, определил, что в принципе достаточно ДВУХ форматов-.mp4 и .webm. То есть основные браузеры прочитают ваше видео, вернее почти ВСЕ(небольшое исключение-древние версии, без авто обновления). А сама ситуация, мало сказать анекдотична ,а грязна по причине больших денег. Одни находят себе работу, а другий умело ЕЕ втюхивают(касается производителей кодеков и всяких ютубов, в контакте и им подобных...) Так что господа, как то вот эдок ВСЕ выходит... И осторожнее с установкой сторонних конвертеров, воровство паролей (из он-лайн программ, которые есть у вас на компе) - цветет "буйным цветом".
Комментарии (3)
Levoch #
: 0
Спасибо, полезная штука. А на старых IE интересно будет работать scratch
artnikov #
: 0
Доброго дня. К сожалению, не во всех, но я немого позже выложу способ, как подключить другие форматы, для почти полной кросбраузерности, хотя в принципе, браузеры уже поколения 3-4, обновляются в автоматическом режиме...
alavira #
: 0
Многим понадобится работать с видео. Спасибо.
Посторонние видеохосты не всегда удобное решение.

Случайное из блогов

samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
artnikov
Доброго всем здоровья! что единственное самое главное, а остальное, как нибудь получится. После...
13 - +6
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7