Як вставити аудіо та відео файли в Dreamweaver

Хоча ви можете використовувати Dreamweaver для вставлення відеофайлів безпосередньо на веб-сторінку, наша найкраща порада — скористатися одним із сервісів розміщення відео, наприклад YouTube або Vimeo.

Коли ви вибираєте «Медіа» в меню «Вставка», ви знайдете кілька параметрів відео та аудіо. Якщо ви хочете вставити відеофайли в одному зі старих і більш запатентованих форматів, таких як Windows Media Video (.wmv) або QuickTime (.mov), ви обираєте параметр Plugin зі спадного списку Media у вкладці Insert меню.

Якщо ви хочете використовувати найновіші формати відео за допомогою тегу відео HTML5, ви можете вставити відео у формати MP4, webM або Ogg Theora, виконавши такі дії:

Клацніть там, де ви хочете, щоб файл відображався на вашій веб-сторінці.

Виберіть Вставка→ Медіа→ Відео HTML5.

Ви також можете клацнути спадний список на панелі «Вставка», вибрати «Медіа», а потім вибрати «Відео HTML 5». У вашому дизайні з’явиться невелике сіре поле зі значком плівки.

Клацніть маленьке сіре поле зі значком плівки.

Властивості відео відображаються в інспекторі властивостей у нижній частині екрана.

У полі Джерело в інспекторі властивостей введіть URL-адресу вашого відеофайлу або виберіть піктограму Огляд, а потім виберіть відеофайл на жорсткому диску.

Після вибору файлу шлях та ім’я файлу з’являться у вікні Джерело.

(Необов’язково) Використовуйте поля Alt Source 1 і Alt Source 2, щоб ввести URL-адресу або переглянути й вибрати відео в додаткових форматах.

Однією зі складнощів використання тегу відео HTML5 є те, що його можна використовувати з трьома форматами відео: mp4, Ogg Theora та webM. Якщо ви хочете, щоб ваше відео відтворювалося в усіх популярних веб-браузерах, вам потрібно включити відео у всіх трьох форматах.

Ви бачите, що всі три поля джерела заповнені відео в кожному з цих форматів. Крім того, ви можете включити Flash-відео для старіших веб-браузерів у поле Flash Fallback.

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

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

Введіть висоту та ширину відповідно до полів H і W інспектора властивостей.

Коли ви додаєте аудіо або відео, Dreamweaver не визначає автоматично висоту та ширину файлу, тому вам потрібно додати розміри в інспекторі властивостей після того, як ви вставите файл.

Збережіть сторінку та клацніть піктограму Попередній перегляд (глобус) (у верхній частині робочої області), щоб відкрити сторінку у браузері, щоб забезпечити сумісність.

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