У даній роботі ви додасте на сторінку один звуковий фрагмент та два відео – одне з папки вашого навчального сайту, інше з відеохостінгу YouTube. Про те, як це робиться, досить детально розповідається на відповідній сторінці посібника Основи HTML. У посібнику розглядаються варіанти підключення медіафайлів різного формату і можливості їх завантаження, якщо браузер користувача старий і не підтримує тегів <audio> та <video>. Вам же пропонується використати простий варіант, виходячи з припущення, що браузери підтримують ці теги й відтворюють файли форматів .mp3 та .mp4.
Створіть копію файлу lists.html з назвою media.html. Як і раніше, видаліть із документа весь код, який не стосується навігації по сайту (дивіться практикум зі створення таблиць). Нижче контейнера <nav>..</nav> ви розташуєте програвач музики і два відео.
ЗАУВАЖЕННЯ: Не зважаючи на те, що медіапрогравачі займають на вебсторінці прямокутну область, кожен наступний програвач, створений тегом <audio> або <video>, буде розташовуватись в тому ж рядку, що і попередній, якщо це дозволяють розміри вікна браузера. Для того, щоб розташувати їх в окремих рядках, вказані теги можна огорнути, наприклад, в контейнер <div>..</div>. Можна також відокремити їх розділовими рисками <hr> або заголовками.
Підготуйте матеріали для використання на вебсторінці. Розташуйте відео і звуковий файл у відповідних папках вашого навчального сайту. Якщо ви не маєте власного відео, завантажте якийсь відеоролик з YouTube. Якщо ви не вмієте цього робити, ознайомтесь з коротенькою інструкцією. У якості звукового файлу можете використати якусь пісню, завантежену з мережі Інтернет. Але, якщо виникли проблеми із завантаженням медіафайлів, ви можете скористатися архівом з музичним та відео файлами, які використовуються у нашому прикладі.
З розвитком технології Web-2.0, на вебсторінках усе частіше використовуються відео, які власники ресурсу розміщують на своєму каналі відеохостінгу YouTube. Для цього є декілька причин: по-перше, суттєво зменшується вага сайту, оскільки відеофайли не містяться беспосередньо в папці сайту; по-друге, відеохостін, може стати ще одним джерелом збільшення відвідуваності сайту. Саме тому, друге відео з YouTube вам завантажувати немає потреби. Якщо у вас немає власного каналу з відеофрагментами, оберіть відеоматеріал на власний смак.
Після закриваючого тега </nav> розташуйте аудіофрагмент. Рекомендуємо вам підписати його, використавши, наприклад, заголовок другого рівня. Щоб програвач звуку відображався на сторінці, до тега <audio> обов'язково додайте controls:
Рис. 1. Атрибут controls є обов'язковим, оскільки без нього ніяких елементів управління звуковим фрагментом не буде. Зовнішній вигляд програвача можна змінити, застосувавши до нього властивості CSS
Рекомендуємо вам поексперементувати з іншими атрибутами тега <audio>. Додавайте їх по черзі і спостерігайте за поведінкою програвача. Слід зауважити, що атрибут autoplay вже не використовують.
Створіть заголовок до наступного відео, а потім додайте його за допомогою тега <video>. Атрибут controls для цього тега також є обов'язковим:
В залежності від того, яке відео ви завантажили, відеоплеєр буде займати більшу чи меншу частину вікна браузера. Додайте до тега <video> атрибут ширини зі значенням, наприклад, 500 (500 пікселів). Щоб не деформувати відео, висоту задавати не варто.
Використовуючи атрибут poster, додайте зображення, яке буде відображатись на сторінці до запуску відео. У нашому прикладі код виглядає наступним чином:
Рис. 2. Для постера необхідно підібрати або змінити зображення таким чином, щоб його лінійні розміри були пропорційні відео, до якого цей постер додається. До широкоформатного відео (нижня частина рисунка) постер підібрано невдало (верхня частина рисунка)
Уведіть ще один заголовок. Наступним буде відео, яке розташовано на відеохостінгу YouTube. Алгоритм для вставки відео на сторінку з YouTube приведений у кінці сторінки про вставку медіаконтенту електронного посібника Основи HTML. Спираючись на приведений алгоритм, додайте на цю сотрінку відео з YouTube. Найкращий варіант, якщо це відео з вашого ютуб-каналу. Але, як зазначалося вище, можна обрати будь-яке відео за власним смаком.
Рис. 3. Зазвичай розміри такого відео задаються атрибутами width="560" height="315". Щоб змінити розміри такого відео, його огортають у контейнер <div>..</div> і впливають за допомогою властивостей CSS саме на розміри цього контейнера
Після закриваючого тега </nav> розташуйте аудіофрагмент. Рекомендуємо вам підписати його, використавши, наприклад, заголовок другого рівня. Щоб програвач звуку відображався на сторінці, до тега <audio> додайте відповідний атрибут (рис. 1.).
Рис. 1. Атрибут controls є обов'язковим, оскільки без нього ніяких елементів управління звуковим фрагментом не буде. Зовнішній вигляд програвача можна змінити, застосувавши до нього властивості CSS
Рекомендуємо вам поексперементувати з іншими атрибутами тега <audio>. Додавайте їх по черзі і спостерігайте за поведінкою програвача. Слід зауважити, що атрибут autoplay вже не використовують.
Створіть заголовок до наступного відео, а потім додайте його за допомогою тега <video>. Атрибут controls для цього тега також є обов'язковим:
В залежності від того, яке відео ви завантажили, відеоплеєр буде займати більшу чи меншу частину вікна браузера. Додайте до тега <video> атрибут ширини зі значенням, наприклад, 500 (500 пікселів). Щоб не деформувати відео, висоту задавати не варто.
Додайте зображення, яке буде відображатись на сторінці до запуску відео, використавши відповідний атрибут.
Рис. 2. Для постера необхідно підібрати або змінити зображення таким чином, щоб його лінійні розміри були пропорційні відео, до якого цей постер додається. До широкоформатного відео (нижня частина рисунка) постер підібрано невдало (верхня частина рисунка)
Уведіть ще один заголовок. Наступним буде відео, яке розташовано на відеохостінгу YouTube. Алгоритм для вставки відео на сторінку з YouTube приведений у кінці сторінки про вставку медіаконтенту електронного посібника Основи HTML. Спираючись на приведений алгоритм, додайте на цю сотрінку відео з YouTube. Найкращий варіант, якщо це відео з вашого ютуб-каналу. Але, як зазначалося вище, можна обрати будь-яке відео за власним смаком.
Рис. 3. Зазвичай розміри такого відео задаються атрибутами width="560" height="315". Щоб змінити розміри такого відео, його огортають у контейнер <div>..</div> і впливають за допомогою властивостей CSS саме на розміри цього контейнера
Додаткове завдання
В електронному посібнику Основи HTML, на який ми посилались на початку практикуму, наведено приклад додавання відео, яке буде адаптуватись до розмірів вікна браузера. Спробуйте аналогічно змінити свій код. Якщо все буде зроблено правильно, ваше відео буде зменшуватись і збільшуватись відповідно до зміни розмірів вікна перегляду.
Виконавши наступну роботу, ви зможете завантажити результат нашої роботи і порівняти зі своїм навчальним сайтом.
