Новости
зміст:
Урок наочно покаже: як вставити відео на веб-сторінку будь-якої версії html. Розглянемо, для кожного способу розміщення відео на сайті, наявні у нього плюси і мінуси.
Спочатку про те, як вставити відео на сторінку з будь-якою версією HTML (4.01, HTML5, XHTML). Цей приклад універсальний і працює на 99.9%: користувач зможе подивитися відео в будь-якому більш-щонайменше не старому браузері (IE не нижче v.9) і якимось б пристроєм він не користувався.
Для цього буде потрібно плеєр, наприклад: FlowPlayer, який без зусиль можна знайти в мережі. Цей плеєр програє відео в форматі MP4 і FLV.
Код для вставки відео на сторінку виглядає наступним чином (де «papka / name. ...» - це шлях до вашого відеофайлу, а «name» - його ім'я):
<Video width = "400" height = "300" preload = "auto" controls> <source src = "papka / name.mp4" /> <source src = "papka / name.ogv" type = 'video / ogg; codecs = "theora, vorbis" '/> <source src = "papka / name.webm" type =' video / webm; codecs = "vp8, vorbis" '/> <object type = "application / x-shockwave-flash" width = "400" height = "300"> <param name = "movie" value = "papka / flowplayer-3.2. 6.swf "/> <param name =" flashvars "value = 'config = {" clip ":" papka / name.mp4 "}' /> </ object> <p> Ваш браузер не підтримує перегляд </ p> <a href="papka/name.mp4"> Завантажити відео </a> </ video>Помістіть FlowPlayer в ту ж папку, де знаходяться відеофайли. атрибути тега Відео в даному прикладі: preload = "auto" - завантажує відео разом зі сторінкою, якщо не використовувати цей атрибут, то сторінка завантажиться швидше, а відео підвантажиться при його включенні користувачем; controls - показує панель управління відео.
Замініть пропорційно ширину і висоту відео (width і height - в двох місцях) на свої, не забуваючи про співвідношення його сторін: 4: 3 або 16: 9.
Останні два рядки: теги P і A з вмістом - дозволять користувачеві завантажити відеофайл, якщо він все-таки не зможе його переглянути.
Ви відразу ж зможете перевірити працездатність коду на вашому комп'ютері. Але для перегляду відео на сайті може знадобитися створити файл httpd.conf, помістити його в папку з відеофайлами - він повинен містити три рядки:
AddType video / ogg.ogv AddType video / mp4.mp4 AddType video / webm.webmМінусом цього способу буде велике споживання ресурсів при одночасному перегляді відео великою кількістю відвідувачів, але це легко нейтралізувати. Для зниження навантаження на сервер потрібно розміщувати відео на сторонніх сервісах, типу хмарного сховища Яндекс Диск , Де термін зберігання файлів не обмежений.
В ставка відео в HTML5 без плеєра
А так можна вставити відео на сторінку з HTML5, тут атрибут poster - це шлях до зображення-заставці:
<Video width = "400" height = "300" controls poster = "images / zastavka.png"> <source src = "papka / name.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '> <source src = "papka / name.ogv" type =' video / ogg; codecs = "theora, vorbis" '> <source src = "papka / name.webm" type =' video / webm; codecs = "vp8, vorbis" '> <p> Ваш браузер не підтримує перегляд </ p> <a href="papka/name.mp4"> Завантажити відео </a> </ video>Щоб домогтися відтворення ролика в різних браузерах, відео необхідно конвертувати, а в папку помістити 3 відеофайлу в різних форматах. Це можна зробити онлайн, наприклад, тут: online-convert.com.
Мінусом цього методу є те, що на деяких застарілих пристроях код буде працювати некоректно. Якщо кроссбраузерность життєво необхідна, то краще застосовувати варіант №1 - вставку відео з використанням плеєра.
Обов'язково прочитайте про розкрутці сайту на YouTube , Де представлена інструкція по завантаженню відео на сервіс і правильному його оформленні. Цим способом можна просувати будь-які товари і послуги в інтернеті, в т.ч. партнерські інфопродукти.
В ставка аудіо
Для того щоб вставити аудіо на сторінку у нас в розпорядженні знову 2 варіанти: з mp3-плеєром і без нього - за допомогою коду HTML5. У цього способу вставки аудіо ті ж плюси і мінуси: він простіше, але не підтримується старими браузерами (IE нижче v.9).
Спосіб 1. Код вставки аудіо на сторінку (де «papka / name. ...» - шлях до аудіофайлу, а «name» - його ім'я):
<Audio controls> <source src = "papka / name.mp3"> <source src = "papka / name.ogg"> <source src = "papka / name.wav"> <p> Ваш браузер не підтримує прослуховування </ p> <a href="papka/name.mp3"> Завантажити аудіо </a> </ audio>Потрібно конвертувати аудіофайл в три формату, а якщо браузер у користувача виявиться застарілим, то він зможе завантажити файл.
Для зниження навантаження на ваш сервер, бажано зберігати аудіофайли на сторонньому ресурсі, такому як Я.Діск (див. Посилання вище).
Спосіб 2. Скачайте mp3-плеєр (flv-mp3.com/ru) і помістіть його в папку з музикою. На цьому сайті є можливість «зібрати» плеєр самому, тобто задати йому свої настройки:
При складанні аудіо-плеєра важливі два параметри: адреса плеєра - ви можете вказати папку свого домену (що краще), або довантажувати його прямо з вказаного сайту. Це відіб'ється в коді, який ви зможете скопіювати для вставки на веб-сторінку, відразу після закінчення збирання.
Другий параметр впливатиме на розміри і вид панелі плеєра, а так же написи «Прослухати» - її ви зміните на свою. Виглядати панель буде як на наступному скріншоті, але ви зможете змінити колір, форму і кнопки управління на більш красиві:
Якщо потрібно - вкажіть автозапуск, а отриманий код розмістіть на потрібній сторінці - його, до речі, завжди можна буде відредагувати: вручну або знову відвідавши сторінку збірки плеєра.
Вчимося робити відео для просування в інтернеті
Автор: С. Панфьоров
Компактна книга по створенню відео різних типів для просування в інтернеті чого завгодно. Ролики дозволять рекламувати себе, бренд, товари або послуги на своєму сайті, в Інстаграм, YouTube та ін. Соціальних мережах. Ви отримаєте вичерпну інформацію про записи скрінкасти і «живого» відео, створення анімаційних роликів і про монтаж відео змішаного складу. Отримаєте уявлення про основи відео-маркетингу, про публікації роликів в інтернеті і трошки професійних секретів.
Скачати книгу
зміст: