1. Издавач
2. x64 (aka andi)

Пред извесно време споменав видео таг, специјално имплементиран во html5. сепак, за жал, употребата на ознаката ќе предизвика повеќе непријатности наместо корист. Затоа, јас ќе ви кажам за начинот на кој можете целосно да направите со еден видео формат.

за еден проект ми требаше да ја пронајдам можноста за одвртување видеа на страницата. Не беше можно да се направи играч од нула на флеш (за почеток, немам развојна околина и не го обезбедив), па затоа беше неопходно, всушност, да се најде соодветен кандидат во лицето на флеш играч. ништо посебно не е комплицирано, бидејќи благодарение на корисниците на Јутјуб многу лесно се движат во овој вид на играчи;)

2 кандидати лоцирани на страниците flv-mp3.com (проект од uppod'a) и flowplayer . секој од нив направи мал удар, првиот беше брзо напуштен во корист на комбинираното обезбедување на сегашната АПИ. како што покажа времето, внатрешното црево не ме изневери (иако некои луѓе успеаја да влезат во vtyuhat flv-mp3.com).

Како што знаете, првиот впечаток е прилично измамен, а предност понекогаш се дава на најмалку заситен уред (особено ако го користи мајчин јазик). Токму овој пристап беше на побарувачката на flv-mp3: услугата дава можност да се "собере" играч со одредени карактеристики (во форма означете ја датотеката што се репродуцира, скрин сејверот, димензиите и некои други параметри) и добијте излезниот код за да ја вметнете датотеката. Да, опцијата може да изгледа многу погодно, особено за луѓе кои сметаат дека HTML е силна вештерка, а да не зборуваме за js и така натаму.

само периодичното додавање на видеа на сајтот е малку веројатно да придонесе за ентузијазмот на постојано "градење" на играчот сам по себе. Алтернативно, можете да ги истражите сите поставки и да ги автоматизирате преку јазикот на серверот. но овој принцип може да се нарече искривено (многу е полесно да се вчитуваат видеа на YouTube и да се добие готов кодот за преземање).

тука доаѓаме до самата работа што веќе може целосно да се нарече волшебничка. Дали сакате да ја разберете магијата на javascript? Ќе покажам дека воопшто не е тешко (дури и полесно отколку да се користи конструктор). и помогне со овој flowplayer. можете да изберете верзија од тука , но првата верзија што е дистрибуирана под GPL3 е доста погодна за вашиот сајт.

Плеерот поддржува репродукција на следната содржина: flv, mp4, m4v (за слики - jpg, gif, png). Видеото е поддржано од верзија 9, па затоа не треба да има проблеми со поддршката.

Преземете ја архивата со плеерот и отпакувајте ја. Ќе треба да испратите 3 датотеки на страницата: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf и example / flowplayer-NumVer.min.js , каде што NumVer е само бројот на верзијата, и може да биде, на пример, 3.2.7 .

Првата датотека содржи контролен панел, вториот - директно на играчот, а третиот е врската која обезбедува API. Првите 2 датотеки (* .swf) мора да бидат во истата папка. сега е време за наједноставниот код. тоа може да биде:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Елементот div со идентификаторот на играчот е контејнерот во кој видео ќе се одврти. во втората линија е поврзувањето со датотека со javascript. Директно за излез е одговорен една функција flowplayer () , која поминува 3 параметри:

1. ID на елементот во кој видео треба да се репродуцира;
2. патеката до играчот (имено на плеерот, а не на контролите што автоматски ќе се вчитаат);
3. Некои дополнителни параметри.

Патем, покрај идентификаторот, можете директно да пренесете референца на објект или селектор.

Кодот погоре не прикажува ништо, но дава идеја за тоа колку е лесно да се поврзете streamplayer на страница. За да излезете видео, треба да креирате трет параметар, и ова, од друга страна, е сосема едноставно.

за едноставност: третиот параметар (config) е асоцијативна низа во која може да се опишат следниве елементи:

• клип - со користење на овој клуч, можете да "направите" глобални поставки, на пример, дали сакате автоматски да започнете буферизирање (autoBuffering) или репродукција (autoPlay), како да ја калкулирате содржината (скенирање со вредноста на вклопувањето ќе го задржи оригиналниот сооднос и за нормално видео ќе се користи, можеби само тоа). Исто така можете да ја наведете датотеката што се репродуцира (url), па дури и да ги суспендира настаните (функции што ќе бидат повикани, на пример, кога филмот ќе почне да се репродуцира);
• плејлистата е редовна низа (листа). секој елемент може да биде стринг (во овој случај, стрингот е адресата на клипот што се репродуцира) или асоцијативна низа. во вториот случај, сетот на податоци може да се гледа како група на податоци слични на клучот за клип од претходната ставка, односно можете да наведете да користите буферинг, да започнете да репродуцирате и така натаму;
• додатоци - служи за проширување на стандардните карактеристики. Една од карактеристиките е способноста за рутирање на интерфејсот на самото место.

Сега мал пример кој вклучува демонстрација на можностите:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, : 'fit'}, плејлиста: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // да манипулира со контролите на приклучоците: {controls: {url:' flowplayer.controls-3.2.16.swf ', листа за репродукција: false , / / ​​ги отстранува копчињата за премотајте назад: true, // додадете го копчето за запирање на прекинувачот: true // false го оневозможува лизгањето на видеото}}}; </ script>

Презентираниот код го поставува следново како глобални поставки: оневозможување на репродукција со автоматско стартување, оневозможување автоматско буферизирање, скенирање на видео за да одговара на прозорецот. Како датотека што може да се репродуцира, се користи слика и видео, а поставките за сликата се преоптоварени (бидејќи треба да се вчитаат автоматски). кога ќе кликнете на сликата (или копчето за изведба), видеото е прикажано. како што можете да видите, сè е многу едноставно. ако сакате да додадете друг видео клип, едноставно додадете нова ставка во плејлистата, одделени со запирка. ако е потребна автоматска репродукција на плејлистата, во асоцијативната низа на клипови е поставена, вредноста на автоматското поставување е поставена на точно.

се наоѓа документација која содржи API функции тука . ако некој не го разбира англискиот - не е важно, сè е сосема јасно таму. и по анализа на кодот погоре, сосема е можно да се разбере што е во доковите. Силно препорачувам поглед, сигурно ќе има "амбиент" што ќе биде на побарувачката.

пример може погледнете овде . не заборавајте да го погледнете изворниот код (Ctrl + U)

Издавач

присутен 1 недела

x64 (aka andi)

Коментари: 2842 Публикации: 395 Регистрација: 02-04-2009