Video таг в html5 и конвертиране с ffmpeg в webm
15-09-2012
Тъй като все повече и повече се навлиза html5 с новите по-улеснени методи.... и имам малко опит с video тага, смятам да го споделя.
Лично аз ползвам videojs библютеката, която предалга лесна конфигурация и множество функций , като добавяне на субтитри към клиповете.
http://videojs.com/ Официален сайт.
Започваме с
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Който трябва да се постави в <head>
</head>


След това в тялото на сайта

<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="REPLACE-ME-PICTURE" autoplay preload="auto" loop data-setup="{}">
<source type="video/mp4" src="REPLACE-ME"> <!-- Линк към mp4 файла -->
<source type="video/mp4" src="REPLACE-ME"><!-- Линк към webm файла -->
<source type="video/ogg" src="REPLACE-ME"><!-- Линк към oggфайла -->
<track kind="captions" src="REPLACE-ME-SUBS" srclang="en" label="English"><!-- Link към субтирите на английски език -->
<track kind="subtitles" src="REPLACE-ME-SUBS" srclang="en" label="English"><!-- Link към субтирите на английски език -->
<track kind="captions" src="REPLACE-ME-SUBS" srclang="bg" label="Bulgarian"><!-- Link към субтирите на английски език -->
</video>


REPLACE-ME-PICTURE - поставяне картинката която е преди да се пусне клипа.Статична.
REPLACE-ME - поставяне линковете към файловете който искате да се изпълнят.Изпълнява се 1 файл.Другите редове са mirrors.
REPLACE-ME-SUBS - Поставяте линка към обикновенните субтитри.

Кода който съм посочил ще се autoplay, ако не желаете клипа сам да тръгва, просто го премахнете от <video .... /> Същото важи и за loop, след като свърши клипа , той ще започне отново...и отново ... и отново....

Също така можете да конфигурирате с CSS ( който вече сте вкарали в хеадъра на страницата ) стила на самият плаер.По дефаулт можете да използвате и същата визия като плаера на youtube.

Addon://
Горещо ви препоръчвам да ползвате webm формат, тъй като той предлага доста добра компресия със минимална загуба на качество.

За да конвертирате видео файл в webm посредством ffmpeg :

ffmpeg -i {vhoden_fail} -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 -s 640x360 {izhoden_fail}.webm


{vhoden_fail} - посочвате реалният път до файла : /home/downloads/videos/v55sa5d.mp4
{izhoden_fail} - посочвате името и реалният път до файла /home/converted/video/v55sa5d.webm
Примерно....
Също така важна е и резолюцията която ще използвате , в примера който съм дал е : 640 на 360, променетея както решите за добре.

Също така ако искате да извадите кадър на снимка от видеото с помоща на ffmpeg :


ffmpeg -i {vhoden_fail} -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 {izhoden_fail_snimka}

{izhoden_fail_snimka} = посочвате реалният път къде да бъде запазана снимката. /home/converted/video/thumb/v55sa5d.jpg


-ss 00:10 => оказва времето къде да бъде направена снимката

/ Трябва да сте регистриран за да напишете коментар /
От: r3nt3r
11:32 24-09-2012
Тук имаш грешка

трябва да е
От: index
12:55 24-09-2012
Боя се ,че не те разбрах.
От: r3nt3r
19:23 24-09-2012
малко бъгове с коментарите :D та Линк към webm файла си му сложил в самия таг mp4 а трябва да е webm :D
От: index
19:47 24-09-2012
Според http://videojs.com/ трябва е mp4 , лично аз също смятам ,че трябва да е webm ,но смятам също ,че и те повече разбират :Д
От: r3nt3r
20:11 26-09-2012
source src="my_video.webm" type='video/webm' хмм
От: index
11:28 21-10-2012
?
1