HTML5 відео 10 речей, які дизайнери повинні знати

Революція HTML5 захоплює веб-дизайнерів з усіх куточків земної кулі. Нові специфікації підтримують десятки елементів і атрибутів для побудови семантичних веб-сайтів. Ці нові функції включають мультимедійні теги для аудіо- та відеоформатів.

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

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

1. Види ЗМІ

Коли ви працюєте з програвачем флеш-відео, занадто поширеним є пов’язувати всі формати відео в .flv. Хоча це і працює, більшість файлів flv не можуть зберегти якість в будь-якому місці з більш просунутими форматами файлів / кодеками. Існує три важливі типи відео, які підтримуються HTML5: MP4, WebM і Ogg / Ogv. Тип файлу MPEG-4, як правило, закодований у H.264, що дозволяє відтворювати у програвачах Flash сторонніх виробників. Це означає, що вам не потрібно зберігати копії відео у форматі .flv для підтримки запасного методу! WebM та Ogg - це два набагато новіші типи файлів, пов'язаних з відео HTML5. Ogg використовує кодування Theora, яке базується на стандартному форматі аудіофайлів з відкритим вихідним кодом. Вони можуть бути збережені з розширенням .ogg або .ogv.

WebM - це проект, випущений Google, про який ви можете дізнатися більше на веб-сайті проекту WebM. Формат вже підтримується Opera, Google Chrome, Firefox 4+ і останнім часом Internet Explorer 9. Більшість веб-професіоналів до цих пір невідомо, але WebM є провідним відеоформатом у майбутньому веб-відео.

2. Підтримка браузера

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

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - немає HTML5, лише Flash!

Якщо ви пам'ятаєте, раніше я згадував, що більшість флеш-відеоплеєрів підтримуватимуть файли MP4, якщо вони закодовані в H.264. Таким чином, кожен з цих браузерів буде вбудовувати MP4 + Flash як остаточний курорт. Це означає, що вам потрібно лише створити два різні формати відео для підтримки всіх браузерів. MP4 для Safari / IE9 і вибір між WebM або Ogg для інших.

На мій погляд, я настійно рекомендую дотримуватися формату WebM. Вона має деякі великі імена, що стоять за проектом (а саме Google) і набули великої тяги в спільноті HTML5. Ogg / Ogv буде підтримуватися, але, швидше за все, він втратить популярність для менших розмірів файлів WebM. Ви можете прочитати відповідний фрагмент про майбутнє відео в Інтернеті, написане Шонами Голіхером.

3. Вставлення простих відео HTML5

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

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

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

4. Пропозиція Flash Fallback

Наведений вище приклад ідеально підходить для всіх веб-браузерів, сумісних зі стандартами. Але ми також повинні враховувати, що світ не завжди знаходиться на передовій технології. Нам потрібно підтримувати користувачів на старих версіях Safari, Mozilla Firefox і особливо Internet Explorer.

Найкращий спосіб досягти цього - за допомогою програвача Flash. Їх можна додати за допомогою вставляти або об'єкт теги для посилання на файл .swf третьої сторони. JW Player і Flowplayer - це два безкоштовних рішення з відкритим вихідним кодом, які можна розглянути. Але також перевірте відеоплеєри преміум-класу на ActiveDen, які можуть доходити до $ 15 - $ 20.

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

5. Підтримка мобільних пристроїв

Ця тема все ще дуже обговорюється, оскільки мобільна індустрія така молода. Apple вийшла з підтримкою MP4 на пристроях Mac і iOS. Це означає, що ви можете спочатку записувати відеофайли .mp4 на вашому iPad, iPhone або iPod Touch в стандартному інтерфейсі відео. Це охоплює велику частку ринку.

Нещодавно пристрої Android відчували важкий час для отримання такого ж рівня підтримки. Однак компанія Google нарешті прийняла веб-потоки .mp4, які зараз використовуються майже на всіх мобільних користувачах. А оскільки Flash не є опцією, MP4 є найкращим доступним рішенням. Тому спочатку потрібно вбудувати код .mp4, щоб пристрої iOS могли негайно розпізнати файл.

6. Агент користувача Safari

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

Це змусить веб-сторінку розпізнати браузер як запущений на іншому пристрої. Швидше за все, ви б обрали iPad, який НЕ підтримує відтворення Flash. Це єдина велика проблема, на яку ви можете зіткнутися під час тестування власних методів відтворення MP4.

7. Керування елементами керування програвачем

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

Щоб дати вам загальну ідею, блог Opera dev розмістив кілька коротких посібників, які чудово підходять для новачків. Навіть якщо ви ніколи раніше не підбирали JavaScript або jQuery, все одно просто натиснути на цю ділянку. Ви можете викликати конкретні атрибути відеоматеріалів, наприклад вимкнено або Поточний час. Тоді ви можете виконувати дії (затушувати фон, відображати оголошення) на основі цих критеріїв, маніпулюючи DOM у jQuery.

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

8. Перетворення формату відео

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

Щоб мати справу з MP4, який є вашим найбільшим пріоритетом, ви можете використовувати HandBrake, який є безкоштовним, відкритим вихідним кодом, який працює на всіх 3 основних ОС. Це буде підтримувати H.264 разом з кількома іншими кодеками, що робить це найкращим варіантом для вільних користувачів. Якщо у вас є гроші, щоб викласти, я повинен порекомендувати Xilisoft конвертер, який знаходиться на Mac App Store, лише за довічну ліцензію на 40 доларів..

Схоже, що маршрут WebM робить життя набагато простішим. Miro Video Converter є безкоштовним інструментом для Windows і OS X, який виробляє файли високої якості WebM. Він також може зробити кодування Ogg Theora, яке виходить з досить високою якістю.

9. Створення веб-плеєра

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

Код є трохи інтенсивним для новачків, оскільки він вимагає вдосконаленого націлювання на CSS і трохи формального jQuery. Існують інші рамки, на яких можна створити індивідуальний дизайн програвача. Аналогічно ця презентація слайд-шоу є чудовим вступом до створення відеопрогравача HTML5.

Створення відеопрогравача HTML5

10. Бібліотека VideoJS

VideoJS - це, мабуть, моє улюблене рішення для відеоплеєрів HTML5. Все, що вам потрібно, це їх власна хост JavaScript і CSS-таблиця стилів, включені де-небудь у вашому документі. Потім ви пишете стандартний код відео HTML5 з деякими додатковими класами для скинування. Нижче я додав зразок коду:

Якщо ви запускаєте блог WordPress, ви також можете спробувати власний плагін WP. Вона автоматично включить бібліотеку js / css на сторінки, на яких відображається відео HTML5. Ви можете зробити це з будь-якого редактора повідомлень або сторінок, використовуючи шорткодні коди (див. Тут).

Висновок

Сподіваюся, цей вступний посібник може викликати ваш інтерес до майбутнього веб-відео. З більшою кількістю користувачів, які звертаються до мобільних пристроїв, важливо, щоб стандарти HTML5 були прийняті для цих типів медіа. Веб-сайт повинен бути простішим, щоб розробники могли швидко виробляти повністю підтримувані рішення. Ми хотіли б почути ваші ідеї та пропозиції щодо майбутнього відео HTML5. Якщо ви хочете поділитися, будь ласка, не соромтеся залишити коментар у зоні після обговорення нижче.