inserarea video pe pagină: utilizați javascript și flash

  1. Autori
  2. x64 (aka andi)

cu ceva timp în urmă am menționat eticheta video, implementată special în html5

cu ceva timp în urmă am menționat eticheta video, implementată special în html5. cu toate acestea, din păcate, utilizarea etichetei va cauza mai multe inconveniente decât să beneficieze. așadar, vă voi spune despre felul în care puteți face complet un format video.

pentru un proiect trebuia să găsesc posibilitatea de a deșuruba videoclipurile pe site. Nu a fost posibil să faci un jucător de la zero (pentru început, nu am un mediu de dezvoltare și nu l-am furnizat), așa că era necesar, de fapt, să găsești un candidat potrivit în fața unui jucător flash. nu a fost nevoie de nimic deosebit de complicat, deoarece datorită utilizatorilor YouTube este foarte ușor să navigați în acest tip de jucători;)

2 candidați localizați pe site-urile flv-mp3.com (un proiect de suspod'a) și Flowplayer . făcând fiecare câte o mică lovitură, prima fiind abandonată rapid în favoarea combinatului care asigură api-ul actual. dupa ce timpul a aratat ca intestinul interior nu ma lasat jos (desi unii au reusit sa ajunga in vtyuhat flv-mp3.com).

După cum știți, prima impresie este destul de înșelătoare și uneori este preferată dispozitivul cel mai puțin saturat (mai ales dacă utilizează limba maternă). Este această abordare care era în cerere pe flv-mp3: serviciul oferă posibilitatea de a "asambla" un jucător cu caracteristici specificate (în formă indicați fișierul redat, ecranul de protecție, dimensiunile și alți parametri) și obțineți codul de ieșire pentru a insera fișierul. Da, opțiunea poate părea foarte convenabilă, mai ales pentru cei care consideră html o vrăjitoare puternică, ca să nu mai vorbim de js și așa mai departe.

numai adăugarea periodică de videoclipuri pe site este puțin probabil să contribuie la entuziasmul de a construi în mod constant jucătorul de la sine. în mod alternativ, puteți explora toate setările și puteți automatiza prin limba serverului. dar acest principiu poate fi numit distorsionat (este mult mai ușor să încărcați videoclipuri pe YouTube și să obțineți codul gata de descărcare).

aici ajungem la lucrul care se poate numi deja o vrăjitoare. vrei să înțelegi magia javascript? Voi arăta că nu este deloc dificil (chiar mai ușor decât utilizarea unui constructor). și ajutor cu acest debitor. puteți alege o versiune de aici , dar prima versiune care este distribuită sub GPL3 este destul de potrivită pentru site-ul dvs.

Playerul acceptă redarea următorului conținut: flv, mp4, m4v (pentru imagini - jpg, gif, png). Videoclipul este acceptat de la versiunea 9, deci nu ar trebui să existe probleme de suport.

Descărcați arhiva împreună cu playerul și despachetați-o. Va trebui să încărcați 3 fișiere în site: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf și exemplu / flowplayer-NumVer.min.js , unde NumVer este doar numărul versiunii și poate fi, de exemplu, 3.2.7 .

Primul fișier conține panoul de control, cel de-al doilea - direct player-ul și al treilea este link-ul care oferă api. Primele 2 fișiere (* .swf) trebuie să fie în același folder. acum este timpul pentru cel mai simplu cod. poate fi:

<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>

Elementul div cu ID-ul jucătorului este containerul în care va fi deșurubat videoclipul. în al doilea rând este conexiunea la fișier javascript. Direct pentru ieșire este responsabilă o funcție flowplayer () , care trece 3 parametri:

  1. ID-ul elementului în care trebuie redat videoclipul;
  2. calea către player (și anume la player și nu la comenzile care vor fi încărcate automat);
  3. Unii parametri suplimentari.

Apropo, pe lângă identificator, puteți trece direct o referință la un obiect sau la un selector.

Codul de mai sus nu afișează nimic, dar oferă o idee despre cât de ușor este să conectați un fluxator la o pagină. Pentru a scoate video, trebuie să creați un al treilea parametru, iar acest lucru este, de altfel, destul de simplu.

pentru simplitate: al treilea parametru (config) este o matrice asociativă în care pot fi descrise următoarele elemente:

  • clip - utilizând această cheie, puteți să "faceți" setări globale, de exemplu, dacă doriți să începeți automat tamponarea (autoBuffering) sau redarea (autoplay), cum să scalați conținutul (scalarea cu valoarea potrivită va păstra raportul original, poate doar asta). De asemenea, puteți specifica fișierul redat (url) și chiar suspenda evenimentele (funcții care vor fi numite, de exemplu, atunci când filmul începe să fie redat);
  • playlistul este o listă regulată (listă). fiecare element poate fi un șir (în acest caz, șirul este adresa clipului care este redat) sau o matrice asociativă. în cel de-al doilea caz, setul de date poate fi privit ca un set de date similar cu cheia clipului din elementul anterior, adică puteți specifica utilizarea buffer-ului, începerea redării și așa mai departe;
  • plugin - uri - servește pentru a extinde caracteristicile standard. Una dintre caracteristici este capacitatea de a rusi interfața chiar la fața locului.

Acum, un mic exemplu care include o demonstrație a posibilităților:

<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 "> fluxplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: : 'fit'}, playlist: [{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 '], // pentru a manipula controalele pluginurilor: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // șterge butoanele de retuș oprire: true, // add scrubber buton stop: true // false dezactivează derularea videoclipului}}}); </ script>

Codul prezentat afișează următoarele ca setări globale: dezactivarea redării automate a startului, dezactivarea tamponării automate, redimensionarea videoclipului pentru a se potrivi ferestrei. Ca fișier care poate fi redat, se utilizează o imagine și un videoclip, iar setările pentru imagine sunt suprascrise (deoarece ar trebui încărcate automat). când faceți clic pe imagine (sau pe butonul de redare), este afișat videoclipul. după cum puteți vedea, totul este foarte simplu. dacă doriți să adăugați un alt videoclip, pur și simplu adăugați un element nou în lista de redare, separate de o virgulă. dacă este necesară redarea automată a listei de redare, în setul de cadre asociative este setat, valoarea de redare automată este setată la true.

documentația care conține funcțiile API este localizată aici . dacă cineva nu înțelege limba engleză - nu contează, totul este destul de clar acolo. și după analizarea codului de mai sus, este destul de posibil să înțelegem ce este în docuri. Recomand foarte mult o privire, cu siguranta va exista o "setare" care va fi in cerere.

exemplu poate uite aici . nu uitați să consultați codul sursă (Ctrl + U)

Autori

offline 1 săptămână

x64 (aka andi)

Comentarii: 2842 Publicații: 395 Înregistrare: 02-04-2009

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!