18 урок

Презентація Веб-технології Урок 17.pptx

Додаткові посилання для опрацювання теми:

1. https://docs.google.com/presentation/d/1QUxfrppgvdj-gDW-suMI3_HYlKMIjlKa5Xj7dNNcu1s/htmlpresent?hl=uk

2. https://studopedia.su/10_1267_vikoristannya-multimedia-na-veb-storinkah.html

3. https://comscienceatschool.blogspot.com/p/blog-page_19.html

Презентація Веб-технології Урок 18-2.pps

Вставка відео- та аудіо-матеріалів на веб-сторінку

Хоча веб-браузери мають вбудовану підтримку зображень з найперших днів, вбудовування аудіо або відео на веб-сторінку завжди вимагало додаткових модулів (окремих програмних компонентів), які додають більше можливостей браузеру, але не є його частиною (наприклад, Flash, QuickTime, RealPlayer та інші).

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

Стандарт HTML5 вводить нові елементи <audio> і <video>, які дозволяють веб-розробникам вбудовувати звук і відео на веб-сторінку, не вимагаючи власних плагінів. Звичайно з цього випливає, що сам браузер повинен мати можливість відтворення таких файлів, на даний момент тільки останні версії браузерів підтримують ці елементи.

Медіа кодеки і формати

Цифрові аудіо та відео дані обробляються через кодек, формулу, яка перетворює і стискає звук або відео в потік бітів для передачі через Інтернет (термін "кодек" представляє скорочене поєднання двох слів "код" і "декодування"). Коли дані доходять до кінцевого користувача, то він повинен мати той же кодек для декодування закодованого сигналу і перетворення його назад в звук або відео.

Деякі медіа кодеки запатентовані, тобто вони належать тільки одній компанії і не відносяться до відкритих стандартів, і, як правило, власники патентів зазвичай стягують ліцензійні збори за використання їх алгоритмів. Розробники браузерів, такі як Apple, Google і Microsoft, мають великий капітал і готові ліцензувати запатентовані кодеки для своїх браузерів. Інші виробники браузерів, такі як Mozilla і Opera замість цього вибирають відкриті стандарти кодеків і не використовують запатентовані їх види. Навіть не дивлячись на те, що останні версії всіх браузерів підтримують вбудовані медіа-файли HTML5, вони ще не дійшли згоди які кодеки краще використовувати.

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

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

Нижче наведено список підтримуваних браузерами кодеків.

Firefox підтримує AAC частково - тільки в контейнері MP4 і коли операційна система підтримує цей формат.

Тег <audio>

Елемент <audio> впроваджує звуковий файл на веб-сторінку. Це замінний елемент, але він не належить до порожніх елементів, тому він може містити і власний контент, і інші елементи. У своїй простій формі елемент <audio> повинен мати тільки атрибут src, який вказує шлях до звукового файлу:

Однак він рідко використовується в такій простій формі. За замовчуванням елемент <audio> не має елементів управління і тому повністю невидимий. Він буде розташовуватися в HTML-документі і може бути доступний в браузері або JavaScript, але просте впровадження аудіо файлу не принесе особливої користі. За допомогою логічного атрибута ,code>controls

можна додати до аудіо-файлу його власні елементи управління, які будуть відображатися на веб-сторінці в місці розташування елемента <audio>:

Ці елементи управління надаються браузером і можуть візуально відрізнятися в залежності від браузера, але надані функції залишаються незмінними:

кнопка play/pause;
полоса прокрутки;
відображення часу;
гучність.

Рис. 1 Так виглядає елемент управління у браузері Mozilla Firefox

Елемент <audio> може містити один або кілька елементів <source>, кожен з яких буде посилатися на свій аудіо-файл. Це буде корисно через відсутність єдиного формату, підтримуваного усіма браузерами. В цьому випадку браузер буде програвати перший медіа-файл, який він підтримує, ігноруючи всі інші:

<!DOCTYPE html>

<html>

<head>

<title>Audio</title>

</head>

<body>

<p><b>Вагнер, "Політ валькірій". Фрагмент</b></p>

<source src="audio/Wagner-Ride_of_the_Valkyries_.ogg" type="audio/ogg;

codecs=vorbis">

Тег audio не підтримується вашим браузером.

<a href="audio/Wagner-Ride_of_the_Valkyries_.mp3">Завантажте музику</a>.

</audio>

</body>

</html>

Атрибути

autoplay − звук починає грати відразу після завантаження сторінки.
controls − додає панель управління до аудіофайлу.
loop − повторює відтворення звуку з початку після його завершення.
muted − відключає звук при відтворенні музики.
src − вказує шлях до файлу, який програться.

Тег <video>

Елемент <video> вбудовує цифрове відео на веб-сторінку. Як і у випадку з <audio>, елемент <video> може мати атрибут src, який вказує URL-адресу відеофайлу:

Атрибути

autoplay − відео починає відтворюватися автоматично після завантаження сторінки.
controls − додає панель управління до відеоролика.
height − задає висоту області для відтворення відеоролика.
loop − повторює відтворення відео від початку після його завершення.
poster − вказує адресу картинки, яка буде відображатися, поки відео недоступне або не відворюється.
preload − використовується для завантаження відео разом із завантаженням веб-сторінки.
src − вказує шлях до відеоролика, який прорається.
width − задає ширину області для відтворення відеоролика.

Елемент <video> також може містити один або кілька елементів <source>, які будуть вказувати на файли різних форматів:

<!DOCTYPE html>

<html>

<head>

<title>Video</title>

</head>

<body>

<p><b>Вагнер, "Політ валькірій", фрагмент</b><p>

<video width="320" height="240" controls="controls"

poster="images/valkiriya.jpg">

Ваш браузер не підтримує тег video

<a href="video/Ride_of_the_Valkyries.mp4">Завантажте відео</a>

</video>

</body>

</html>

Вставка відео з YouTube

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

Окрім того, вставити відео у такий спосіб досить просто.

0. Необхідно перейти на сторінку потрібного відео на youtube.com.

1. Натиснути кнопку "Поділитися" під відео

2. Обрати "Вставити"

3. Натиснути "Копіювати"

4. Вставити у html-документ з буфера обміну скопійований код. Щоб відео було адаптивним, необхідно огорнути цей тег у контейнер <div>, якому у стилях надають адаптивні розміри (дивіться наступний приклад).

<!DOCTYPE html>

<html>

<head>

<title>Video</title>

</head>

<style>

.video {

position:relative;

padding-bottom:56.25%;

padding-top:25px;height:0;

}

.video iframe {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

</style>

<body>

width="560" height="315"

frameborder="0" allow="autoplay; encrypted-media"

allowfullscreen>

</iframe>

</div>

</body>

</html>

Вставки мультимедіа

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

Передумови

Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!

Довідники

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

Зображення у форматі HTML

Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента <img> (en-US), який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою <figure> (en-US) і як він відноситься до фонових зображень CSS.

Відео та аудіозапис

Далі ми розглянемо, як використовувати HTML5 елементи <video> та <audio> (en-US), щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.

Від <object> до <iframe> - інші технології вбудовування

На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: <iframe>, елементи <embed> (en-US) і <object> (en-US). <iframe> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.

Додавання векторної графіки до Інтернету

Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний SVG формат на веб-сторінках.

Відповідні зображення

За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент <picture> (en-US).

Розміщення та відтворення на веб-сторінках мультимедійних даних.

Для програвання звукових файлів на комп'ютері повинна бути встановлена звукова карта та програма для відтворення звуку.

Створення фонового звучання. Тег <BGSOUND> задає фонові звуки чи музику при перегляді документу (аудіо- об’єкти повинні мати такі розширення: .mp3,.WAV, .AU, MIDI). Інші параметри задаються атрибутами даного тега:

src==”URL адреса аудіо-об’єкта”;

LOOP=n

Визначає частоту програвання відео- кліпу (скільки разів). Якщо n=-1, або LOOP=INFINITE, то кліп програється безперервно.

Наприклад:

<BGSOUND SRC="audio.mp3" LOOP=1> - створення фонової музики.

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

Приклад вставки аудіо- об’єкта за допомогою текстового гіперпосилання:

<a href="audio.mp3">Музика</a>

Приклад вставки аудіо- об’єкта за допомогою графічного гіперпосилання:

Вставка на веб-сторінку відео- об’єктів.

Для перегляду відеоматеріалів на компютері повинна бути встановлена відео карта та відповідне програмне забезпечення. На веб-сторінку можна вставити невеликі за обсягом відео-кліпи, що мають розширення .avi, .flv. Для їх вставки використовують вже відомий тег <img> та відповідні атрибути:

DYNSRC=”URL адреса відео-об’єкта”

CONTROLS

Цей атрибут керує переглядом відео- кліпу. Якщо він присутній, то кліп стартує по команді користувача.

START=

Задає умову початку програвання звукового файу, заданого атрибутом DYNSRC=. Його значення можуть бути слідуючими:

FILEOPEN

Розпочати програвання як тільки завершиться завантаження (виконується по замовчуванню).

MOUSEOVER

Розпочати програвання після вказівки мишкою користувачем.

WIDTH=n - задає розміри довжини вікна прокрутки відео- кліпу;

HEIGHT=n - задає розміри ширини вікна прокрутки відео- кліпу;

ALIGN=... - задає розташування відео- кліпу (right, left, center).

LOOP=n

Приклад вставки відео- об’єкта на веб-сторінку:

<IMG DYNSRC="video.flv" START=MOUSEOVER LOOP=1

WIDTH=300 HEIGHT=200 ALIGN=left>

Рухомий текстовий рядок.

Behavior= поведінка рядка (Scroll - звичайна прокрутка, Slide - рядок добігає до кінця і зупиняється, Alternate - рядок рухатиметься від краю до краю).

<marquee height=30 width=900><font color=red><h1 align=center>Привіт! Це мій перший сайт!</h1></font></marquee><br>

Page updated

Google Sites

Report abuse