Поточний час:
Сьогодні 22 липня, неділя 2018 рік
Zura-Blog 3 роки 7 місяців 3 дня

Ваш ip адрес:54.225.32.164

Доброї ночі!
Ви обновили сторінку в 4 : 11
Статистика

Кількість публікацій на блозі: 376
Кількість коментарів на блозі: 107
Кількість категорій на блозі: 18
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

 

Post_69aПривіт сьогоднішня тема буде стосуватись ілюстрацій. Що таке ілюстрації, це зображення, відеоролики, аудіозвуки власне а мова сьогодні піде про те як, добавити до сайту відеоролик і аудіозвуки.

Навчаючись розробляти графічний дизайн новачок мабуть шукає відповідь на подібні запитання, де взяти зображення, щоб обробити і вставити для веб–сайту. Як додати до сайту відеоролик, любиму аудіокомпозицію і т.д.

Подібна тематика уже розглядалась на Zura-Blog в публікаціях  “Вставляємо відео на сайт без плагіна”, і “Плагін Video Embeder WordPress” правда тоді ролики пропонувались додавати на сайт з самих відеохостингів. А що коли у вас присутньо бажання вставити ваш особистий відеоролик.

В такому випадку ролик  на відеохостингу буде відсутній, як тоді розмістити відеоролик чи аудіозапис в себе на сайті, на дане питання відповідь знаходиться в цій темі. 

Про те як додаються ролики з різних відеохостингів мова йшла в попередніх публікаціях, і вся складність процедури, яку потрібно зробити щоб розмістити ролик в себе на сайті, заключається в тому щоб скопіювати код і вставити цей код в вибране місце, обновити сторінку і все готово.

Майже аналогічна процедура  з аудіо і відео коли ми хочимо вставити власні ролики чи аудіозаписи, для цього заходим на власний ресурс, створюємо папку в створену папку поміщаємо відео або аудіо файли,  далі копіюємо код і розміщуємо код  на сторінці сайту.

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

Але така процедура  займе час, спочатку потрібно пройти   реєстрацію на сайті, навряд чи без реєстрації хтось вам дозволить розміщувати медіафайли,   може статись випадок коли сервер на якому ми розмістимо файли не буде працювати, тоді вашими аудіо чи відео не можливо  буде скористатись.  

Тому я вважаю що кращий варіант, це розмістити а особливо аудіозвуки в себе на сайті, процедура додати власне аудіо не набагато складніша ніж вставити аудіомелодію з інших ресурсів.

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

Як додати аудіокомпозицію на сайт.

⇒ 1-ДІЯ

Нам потрібно створити папку і розмістити папку в корені нашого сайту, хто не знає що таке корінь сайту, тоді простіше сказати треба розмістити папку іменно в середині папки вашого сайту. Ви можите прочита публікацію “Як створюємо сайт на HTML” там розміщена потрібна інформація якщо ви не створювали ще сайти.

 

Нижче цитата, яка коротко пояснює які потрібно зробити початкові дії, перед початком створення перших сторінок для сайту.
  

Ми збираємось створювати сайт, не одну сторінку а сайт. Сайт складається не з одного файлу, а з декількох, не з одної сторінки, а декілька. Нам ці  файли потрібно десь розмістити. Звичайно для цього потрібно створити папку, куда би ми розміщували наші файли.— слова взяті з сторінки “Як створити сайт на HTML”

Для того щоб в нас появилось аудіозвук першим ділом створюємо папку, даємо назву “audio” в цю папку як ви вже мабуть зрозуміли потрібно буде розмістити ваш адіофайл.  Для прикладу я розміщу свій, по якому можна буде орієнтуватись, а потім в лапках поміняти назву 07. quardo rossi – maria (original mix).mp3.ogg на назву вашого аудіофайла.

Код аудіо quardo rossi – maria

<p>quardo rossi – maria (original mix).mp3</p>
<audio controls>
<source src=”audio/07. quardo rossi – maria (original mix).mp3.ogg” type=”audio/ogg; codecs=vorbis”>
<source src=”audio/07. quardo rossi – maria (original mix).mp3” type=”audio/mpeg”>
</audio>

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

<audio controls>
    <source src="audio/07. quardo rossi - maria (original mix).mp3.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio/07. quardo rossi - maria (original mix).mp3" type="audio/mpeg">
    </audio>

⇒2-ДІЯ

А далі все просто копіюєте код, відкриваєте ваш любимий редактор, якому ви надаєте перевагу, вибираєте місце куда плануєте розмістити файл, вставляєте код, далі модифікуєте точніше міняєте назву в коді, замість назви

⇒ 07. quardo rossi – maria (original mix).mp3 вставляєте назвого вашого аудіофайлу, в середині лапок “”.

Якщо не получиться тоді які можуть бути помилки, тільки якщо ви не правильно вказали назву вашого аудіофайлу, можите дати файлу простішу, коротшу назву, наприклад переіменувати файл числом “22”, або натисніть переіменувати, потім копіювати і вставляємо назву в середині між лапками “”.

Можуть кодики аудіофайлу не підходити, в такому разі існують багато програм які призначені для того щоб надати повну інформацію про медіафайл, знаходите назву кодеку, і прописуєте її замість назви яка присутня в даному коді.

<source src=”audio/07. quardo rossi – maria (original mix).mp3″ type=”audio/mpeg”>

audio назва папки в котрій розміщений аудіофайл

/ слеш якщо хочите вказати інший аудіофайл, тоді вставляєте в папку і після “слеш” прописуєте назву іншого аудіофайлу а цю видаляєте.

07. quardo rossi – maria (original mix).mp3 назва аудіофайлу

Якщо на сторінці появиться плеєр аудіофайла, і в формі плеєра буде вказаний час аудіоролику, тоді все готово, означає получилосб, клацаємо і слухаємо.

audio1

⇑вказаний час в плеєрі тоді все готово

Елемент “аудіо”

був введений в HTML в пятій версії. Цей елемент можна використовувати для введення звуку в HTML і ХHTML.

⇒ Атрибути елемента “audio”.

autoplay — при використання даного атрибуту аудіоролик автоматично запускається коли зайти на сторінку.

controls —  при використання даного атрибуту браузер відобразить декілька кнопок контролю для управління (звук, пошук, аудіо)

loop — відтворення звуку по колу

src — вказує адресу де зберігається звук , якщо відсутній локальний звуковий файл можно вказати інтернет–адресу де зберігається звук.

Елемент “Embed”

Наступний приклад елемента HTML який виводить звук, являється елемент  “Embed”, сумістний з більшостю браузерів, для програвання звуків використовує платформу Windows Media Player, вважається одним з найбільшрозпоширених.

Підтримуються Internet Exploer і Mozilla Firefox зараз перевірю 

Internet Exploer — в мене запустились чомусь два ролика одночасно,  два елементи включились “Embed” і “Аудіо”

Mozilla Firefox — на інструмент  “Embed” пише що потрібно встановити  плагін,

Я взагалі то користуюсь “Opera” в ній все добре відображається, в інших браузерах  також повинно все відображатись, оскільки все залежить від налаштувань браузера, крім “Opera” я використовую і “Google Сhrome”  в Google Сhrome також все відображається.

→ Список атрибутів елементу “Embed”

volume — = “n” дозволяє вказати величину від 0 до 100 яка відповідає гучності з якою буде відображатись аудіоілюстрація.

loop — “true” “false” “n” можливість відтворення аудіоілюстрації по колу

playcount — “n” надає можлиість вказати скільки разів відтворювати звук

plaginspase — “url” для того щоб вказати місце в інтернеті де знаходяться декодери чи програмне забезпечення для визначеного типу звуку.

plaginurl — “url”  місце в інтернеті де можна знайти деякі плагіни, необхідні для прослуховування звуку.

target — “” трансформує панель управління в посилання

autostart — “true” “false” надасть можливість автоматично відтворювати аудіо при заході на сайт

startime — “mm:ss” положення в аудіофайлі з якого почнеться відтворення

endtime — “mm:ss” положення в аудіофайлі де відтворення закінчиться

Код “Embed” 

<embed src=“audio/07. quardo rossi – maria (original mix).mp3” type=”audio/mpeg” autostart=”true” hidden=”true” >

При переході на сторінку в якій буде розміщений цей код аудіокомпозиція запуститься автоматично, панель плєєру прихована, точніше її не видно на сторінці, ви можите видалити атрибут “hidden” або вказати в атрибут hidden “false”, тоді появиться панель плеєра від елемента “Embed”

<embed src="audio/07. quardo rossi - maria (original mix).mp3" type="audio/mpeg" autostart="true" hidden="false">

Власне даний елемент дозволяє використовувати багато можливостей, список атрибутів елемента “Embed” вказаний вище. 

Елемент “bgsound”

ще один інструмент HTML, який дозволяє вводити звук на сторінку веб–сайту. Але сумісний тільки з Internet Exploer.

⇒ Список атрибутів елементу “bgsound”

balance —  позволяє встановити баланс між лівим і праим каналом

loop — можливість відтворення аудіоілюстрації по колу

src — дозволяє вказати місце в інтернті де можна знайти вказаний звук

volume — рівень гучності звука

Код “bgsound”

<bgsound src=”audio/07. quardo rossi – maria (original mix).mp3“>

Фільми на веб–сайті

Існує багато інструментів які дозволяють вводити в код сайту фільми любого типу. Їх можна вводити з допомогою технологій Java,  JavaScript і  PHP. Самим знаменитим порталом який містить неймовірну кількість відеороликів являється YouTube. Для того щоб відображати дані фільми використовують flash–технології.

Для того щоб подивитись відео крім подібних  потралів, можна також як і в випадку з аудіокомпозицією використовувати різні елементи. Але тут присутній свій ньюанс. Адже відеоролик має набагатобільший розмір ніж аудіо. Мабуть зовсім не доречно буде завантажувати на сервер відеоролік вага якого сягає гігабайти.

Взагалі то для відеороликів в кого на хостингу присутні звичайні не дорогі тарифи рекомендують завантажувати файли не більше 30 мегабайт. 30 мегабайт може вистачити для слайдшоу.

Нижче спосіб через який ви зможите створити відеоролик в себе на сайті, процедура стандартна як і з аудіофайлами. В папці сайту створюємо папку для відеофайлів, назвемо папку “video” і в папку поміститимо  відеофайл.

Далі код  

<p>video</p>
<video width=”500″ height=”400″ controls>
<source src=”video/Name.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<source src=”video/Name.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”video/Name.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<track kind=”subtitles” src=”video/Name.en.srt” srclang=”en” label=”English”>
<track kind=”subtitles” src=”video/Name.ua.srt” srclang=”uk” label=”Український”>
<track kind=”subtitles” src=”video/Name.ru.srt” srclang=”ru” label=”Русский”>
Тег video не підтримується вашим браузером.
</video>

 

І тепер модифікуємо, міняємо назву ролика “Name” на назву вашого ролика, і у вас повинен зявитись плеєер з картинкою.

<p>video</p>
  <video width="500" height="400" controls>
    <source src="video/Name.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/Name.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/Name.webm" type='video/webm; codecs="vp8, vorbis"'>
    <track kind="subtitles" src="video/Name.en.srt" srclang="en" label="English">
    <track kind="subtitles" src="video/Name.ua.srt" srclang="uk" label="Український">
    <track kind="subtitles" src="video/Name.ru.srt" srclang="ru" label="Русский">
     Тег video не підтримується вашим браузером.
    </video>

audio2

⇑зявитись плеєер з картинкою

Якщо не получиться тоді які можуть бути помилки, такі самі як з аудіофайлом,  якщо ви не правильно вкажите назву вашого відеофайлу, або кодеки вашого відео інші.

Вирішення так само як і з аудіофайлом, програма яка надасть повну інформацію про медіафайл, і потім прописуйте потрібні кодики.

Мої відеофайли за даним кодом получилось додати до тестового сайту без проблем, ну а гігабайтні фільми з розширеням “матрьошка” на сайт навряд чи хтось з вас буде  додавати. 

audio3

⇑ролик не працює  😥 

<track kind=”subtitles” src=”video/Name.en.srt” srclang=”en” label=”English”>
<track kind=”subtitles” src=”video/Name.ua.srt” srclang=”uk” label=”Український”>
<track kind=”subtitles” src=”video/Name.ru.srt” srclang=”ru” label=”Русский”>
Тег video не підтримується вашим браузером.

Дану область в коді можна не вказувати вона розрахована на субтитри якщо присутні в відеоролику.

В принципі можна закруглятись, існують багато спосібів які дозволять розмістит на сайті фільми, відеоролики, також існує і багато інструментів які дозволятьти вводити в код сайту любі типи фільми, теж саме стосується і звуків.

]loop — секция звуку, яка зроблена таким чином що вона може повторюватись нескіеченно поки її не перервуть.

Ми можемо вводити звуки двома способами, це  в формі плеєра і в виді фону, музикального супроводу коли перейшовши на сторінку починається відтворюватись мелодія, а плеєра не видно.

На рахунок відеороликів як я згадував раніше існують відеосервіси візьме наприклад YouTube, після реєстрації і створення свого облікового запису Google вам надасть багато додаткових можливостей.

На цьому все до зустрічі.

Leave a Reply

Your email address will not be published. Required fields are marked *