нології дозволяли створювати або використовувати вже готовий відеоплеєр, відеофайли потребували кодуванні, а html-код ставав громіздким.
Стів Джобс у квітні 2010 року віддав свою перевагу HTML5, згадавши, що Flash «вже не потрібен», що безсумнівно вплинуло на рішення веб-розробників. Перспективи HTML5 в відео і створення веб-сайтів виглядають досить позитивно.
Відмінності HTML5 від Flash.
Перше, на що варто звернути увагу, це застосовність в мобільному середовищі і наявність семантичної середовищі. На сьогоднішній момент поширено використання мобільних пристроїв для виходу в інтернет, покупки в інтернет магазинах і розваги що відмінно підходить для відкритої структури HTML5. Flash готуватися зайняти своє почесне місце в прошлом.оптімізація. Застосування в мобільному середовищі є очевидною перевагою, але не єдиним над Flash. Структура сайту, створеного за допомогою Flash для пошуковиків представляє з себе «чорний ящик» з незрозумілим вмістом, тоді як HTML5 дозволяє заглянути всередину пошуковим системам і тим самим індексувати сторінку для кращих пошукових запитів.
Разметка.предлагает вам два способи підключення відео на веб-сторінку і обидва вони пов'язані з елементом lt; video gt ;, до того ж дуже схоже на додавання картинки через тег lt; img scr= .. gt;.
Приклад: lt; video src= vi.webm gt; lt;/video gt;
І подібно зображенню, ви завжди повинні вказати атрибути width і height в тезі lt; video gt ;. Атрибути можуть не збігатися з висотою і шириною відео, яку ви вказали в процесі кодування. І в цьому немає нічого страшного, браузер буде центрувати відео усередині прямокутника, заданого тегом lt; video gt ;, пропорції відео не будуть зачеплені.
Приклад: lt; video src= vi.webm height= 240 width= 320 gt; lt;/video gt;
За замовчуванням для елемента lt; video gt; не повинні додаватися елементи управління. Можна створити власні елементи з використанням CSS, HTML і JavaScript. Для цього існують такі методи як pause (), play () і властивості currentTime, muted і volume. Все це стане в нагоді для створення власного інтерфейсу.
Але для того що б браузер виводив вбудовані елементи управління, необхідно в тег lt; video gt; включити атрибут controls.
Приклад: lt; video src= vi.webm width= 320 height= 240 controls gt; lt;/video gt;
Приклад відео з вбудованими елементами управління в браузері Google Chrome версії 39
І перш ніж рухатися далі, розглянемо два додаткових атрибуту, які знадобляться при створенні повноцінного сайту з відео. Атрибут preload повідомляє браузеру, що почати завантаження відео необхідно відразу ж після завантаження сторінки. В основному це використовується для важливої ??інформації. Але що б не витрачати мережевий трафік даремно, можна встановити preload як none.
Ось приклад відео, яке починає завантаження, але не відтворює, після завантаження станиці: lt; video src= vi.webm width= 320 height= 240 preload gt; lt;/video gt;
А ось приклад відео, яке не завантажується при завантаженні сторінки:
lt; video src= vi.webm width= 320 height= 240 preload= none gt; lt;/video gt;
Атрибут autoplay робить саме те, як і звучить. Завантаження відео починається при завантаженні сторінки і відтворює його при можливості. Рекламодавці від цього в захваті, в той час як інші це просто ненавидять.
Приклад автоматичного відтворення на сайті:
lt; video src= vi.webm width= 320 height= 240 autoplay gt; lt;/video gt;
Але що робити, якщо у вас не один, а цілих три відеофайлу з різними форматами: OGV, MP4 і WebM? HTML5 може зробити посилання на всі три файли за допомогою такого елемента як lt; source gt ;. Один елемент lt; video gt; може містити кілька і більше тегів lt; source gt ;. Браузер проходиться за списком джерел по порядку і вибере те, що він може відтворити.
І для того, щоб не витрачати мережевий трафік даремно, поки браузер намагається відтворити кожне відео, слід повідомити браузеру інформацію про кожного відео. Це робиться всередині тега lt; source gt; за допомогою атрибуту type. Подивимося на прикладі, як це виглядає.
lt; video width= 320 height= 240 controls gt;
lt; source src= vi.webm type= video/webm; codecs= vp8, vorbis gt;
lt; source src= vi.mp4 type= video/mp4; codecs= avc1.42E01E, mp4a.40.2 gt;
lt; source src= vi.ogv type= video/ogg; codecs= theora, vorbis gt;
lt;/video gt; Розберемо докладніше. Елемент...
