Вмъкване на видео в сайт

22.01.2019

За годините, изминали от оригиналното публикуване на статията, технологиите са се променили прекалено много. Моля не следвайте описаното по-долу като урок как да вмъкнете видео в сайт. Статията е запазена по-скоро с музейна стойност.

---

Спомням си как преди години, когато започнах да пиша HTML гледах тъжно <img> тага и се ядосвах защо няма един <video> таг. Години по-късно, сега така желания <video> таг го има, ама ползването му е коренно различно от това, което очаквах.

1. едни браузъри го имат, други — не
2. едни ползват едни кодеци
3. други втори, трети — трети, четвърти — пети…

тука вече и аз се обърках

Ако и вие търсите начин възможно най-лесно да вмъкнете видео на сайта си, което да върви на всички, то мога да ви предложа следното решение.

Не покрива наистина 100% от всички устройства, с които сайтът ви може да се посети, но ето какво точно включва:

Flash Video Player за всички desktop машини (реално погледнато — няма компютър без Flash) и HTML5.

<video> fallback за iOS и Android устройства с версия по-ниска от 2.2 или пък слаби процесори. В този случай кого пропускаме? Някой, който никога дори няма да посети сайта ни.

Преди да сме започнали можете да видите едно просто демо на крайния резултат тук: https://magadanski.com/demo/video/

Да започнем с една проста HTML5 страничка с един <video> таг:

<video width="640" height="360" controls="controls" src="https://magadanski.com/wp-content/uploads/2011/09/Nickelback-Gotta-Be-Somebody.mp4" poster="https://magadanski.com/wp-content/uploads/2011/09/Nickelback-Gotta-Be-Somebody-620x349.jpg">
</video>

HTML5 видео тагът се използва за Flash Fallback както вече обяснихме. Задайте размери на видеото, а по желание и постер, и autoplay. Аз съм включил и controls, но ми се струва безсмислено да се пропуска.

Нещо, което заслужава да му бъде обърнато внимание, е форматът на видеото, което използваме. При мене това е .MP4 файл (h.264 кодеци). Защо това е толкова важно? Както споменахме — това е един от основните проблеми при HTML5 видеото — че различните браузъри използват различни кодеци. Макар и HTML5 да позволява да задаваме по няколко source-а за един HTML5 видео елемент, не всеки има възможността да си кодира видео файловете толкова пъти, а и нека не забравяме, че hosting-ът ни не е безкраен.

Използвам h.264 кодеци, тъй като Flash Player ги поддържа от версия 9 насам (ако не се лъжа — това прави 4-5 години).

Освен това, казахме, че HTML5 видео ще използваме за fallback за iOS и Android, чиито браузъри са базирани на Webkit и поддържат именно този кодек.

Кои браузъри не поддържат h.264 (и колко от тях нямат Flash Player)?

Firefox и Opera не поддържат h.264, а когато излезе Chrome 8 от Google заявиха, че ще прекратят поддръжката на този кодек в техния браузър, за да си правят реклама на техния собстнен — WebM.

Пазарният дял на Opera е твърде малък, за да го взимам под внимание, а не познавам хора, които да ползват Firefox и да нямат Flash Player.

Остава Chrome, който в момента (версия 14) все още поддържа h.264, а от версия 7 насам има вграден Flash Player, така че там реално не ни интересуват никакви HTML5 видео кодеци, тъй като изобщо няма да се стигне до там.

В бъдеще обаче може и да минем на WebM, тъй като от Adobe съобщиха, че във Flash Player 11 ще добавят поддръжка за този формат, Chrome го поддържа, Firefox и Opera — също.

Остават обаче Internet Explorer и Safari, които карат с h.264. Въпрос на време е Google да добавят поддръжка за WebM в Android, обаче на дали Apple ще направят същото за iOS.

И в този случай пак губим тези, заради които изобщо си правим труда да вкарваме HTML5 fallback — iOS.

Да продължим нататък.

За по-приятен вършен вид добавяме и малко CSS.

* { margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; }
body { background: #000; }
video, object { position: absolute; top: 50%; left: 50%; margin: -180px 0 0 -320px; }

Обърнете внимание на селектора video, object. Това е поради факта, че Flash Video Player-ът, ще замести <video> тага с <object> таг. Самите стилове в случая не са от особено значение, но ако ги прилагате само по името на тага — не забравяйте да ги зададете и за двата споменати тага. Ако пък стилвате по parent елемент или по ID няма да имате никакъв проблем.

Експериментирайте и вижте как ви е най-удобно на вас — само имайте предвид, че нещо може да се омаже по тази причина и тогава вземете нужните мерки.

Добавяне на Flash fallack

Сега вече идва и интересната част. До тук имаме само HTML5 видео поддръжка и то за браузъри, които работят с h.264 кодеци (iOS, Android, Chrome 3+, Safari 4+, Internet Explorer 9+). За да могат всички останали да гледат видеото ни, трябва да добавим малко JavaScript (с който ще вкараме Flash естествено).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

А след като сме добавили тези библиотеки вмъкваме и този код:

jQuery(function($) {
    $('video').each(function() {
        if (typeof($(this).attr('id')) == 'undefined') {
            $(this).attr('id', 'video-' + new Date().getTime());
        }

        var flashvars = {};
        flashvars.src = $(this).attr('src');
        flashvars.autoPlay = $(this).attr('autoplay');
        flashvars.poster = $(this).attr('poster');

        var params = {};
        params.allowscriptaccess = "always";
        params.allowfullscreen = "true";
        params.wmode = "transparent";

        var attributes = {};

        swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", $(this).attr('id'), $(this).attr('width'), $(this).attr('height'), "10.1", "http://cdn.tagul.com/expressInstall.swf", flashvars, params, attributes);
    });
});

Самият този скрипт е написан така, че да бъде напълно преизползваем и дори мисля след малко повече тестване просто да го пусна като готова библиотека, която да добавяте в страницата си и всичко да върви от самосебе си.

Ето какво правят тези няколко реда JavaScript:

Първо зареждаме swfobject.

За да докажа колко е лесно съм използвал CDN. По този начин едновременно сме сигурни, че библиотеката ще бъде заредена максимално бързо, а и не се занимаваме с host-ване на още един скрипт.

Освен това зареждаме и jQuery.

Почти всеки сайт го използва, така че може би дори няма да ни се наложи да го правим. В случая пак го добавям от CDN (така де — от официалната страница), така че и там си спестяваме малко главоболия.

Същинската част започва след това.

Започваме с функция, която се изполнява на DOMReady. Ако някой не знае — точно това се постига, когато имаме:

jQuery(function($) {
});

Вътре обхождаме всички <video> тагове и за всеки един по отделно изпълняваме нова вътрешна функция. Това го правим с цел да избегнем аварии, когато на една страница има няколко видеота.

На следващите редове правим проверка дали текущият <video> таг има id атрибут, който ще ни е нужен за правилната работа на swfobject. Ако тагът няма такъв атрибут му добавяме, като го генерираме по простата схема “video-{timestamp}“, като {timestamp} всъщност е брой милисекунди от 01.01.1970 насам.

Можем да сме спокойни, че id-тата ще са различни, тъй като няма как един браузър да е толкова бърз, че за по-малко от една милисекунда да извърши следващите операции (не, че са чак толкова много, просто една милисекунда е толкова малко).

В следващите редове подготвяме три обекта с параметри, които се подават като аргументи на swfobject — flashvars, params и attributes.

flashvars са променливите, които трябва да подадем към .SWF файла, който ще вкарваме. В нашия случай това са src, autoPlay и poster.

Имайте предвид, че аз използвам Strobe Media Playback видео плейъра, а ако вие решите да използвате друг може би ще ви се наложи да промените в малка степен имената на тези променливи.

params съдържа параметри, които са необходими на самия <object> таг, за да бъде представен по начин, който ни допада. Задаваме allowscriptaccess на always, тъй като самият Strobe Media Playback поддържа комуникация с JS. allowfullscreen го задаваме на true, за да можем все пак да си гледаме видеото на цял екран, а wmode го задаваме като transparent, за да не изглеждат всички html елементи позиционирани зад Flash съдържанието (ако имаме някой JS попъп, ще искаме той да си е отгоре).

Накрая идва ред и на swfobject.embedSWF метода.

Първият аргумент, който подаваме е път до .SWF файла, който искаме да вкараме. Колко ли е учудващо, че използвам CDN 😛 ?

После задаваме id-то на елемента на чието място искаме да вкараме Flash съдържанието (с други думи — id-то на видео елемента).

Трети аргумент — широчина. Нея си я взимаме от самия <video> таг.

Същото правим и с височината — четвъртия аргумент.

Като пети аргумент задаваме версия на Flash Player, която изискваме. Strobe Media Playback изисква Flash Player 10.1.

Някои, които държат да поддържат наистина стари компютри биха използвали друг player и по-стара версия на Flash, но 10.1 излезе преди около 3 години, така че ми се струва, че е достатъчно навлязла версия.

Следващият аргумент е път до expressinstall.swf (естествено, че ще задам път до CDN). Този файл се използва когато версията на Flash Player е по-стара от тази посочена в предния аргумент. На посетителите на сайта им се предлага да си обновят Flash Player-а.

Последните три аргумента са flashvars, params и attributes обектите, съдържащи настройки, за които вече говорихме.

Това е!

Идете на https://magadanski.com/demo/video/ и вижте пълния source code на страницата. Няма нищо страшно, а двата файла, които не използват CDN са именно видео файлът и постерът, като вторият дори не е задължителен.