• Главная
  • Карта сайта
Не найдено

video ievietošana lapā: izmantojiet javascript un flash

  1. Izdevējs
  2. x64 (aka andi)

pirms kāda laika es minēju video tagu, kas speciāli ieviesta html5

pirms kāda laika es minēju video tagu, kas speciāli ieviesta html5. tomēr, diemžēl, taga izmantošana radīs vairāk neērtību, nevis labumu. tāpēc es jums pastāstīšu par veidu, kā jūs varat pilnībā paveikt vienu video formātu.

vienam projektam bija nepieciešams atrast iespēju noņemt videoklipus vietnē. Spēlētāju no nulles nevarēja izdarīt uz zibspuldzes (sākumā man nav attīstības vides un to nesniedzu), tāpēc faktiski bija nepieciešams atrast piemērotu kandidātu flash atskaņotāja priekšā. nekas īpaši sarežģīts nebija vajadzīgs, jo, pateicoties YouTube lietotājiem, ir ļoti viegli orientēties šāda veida spēlētājiem;)

2 kandidāti, kas atrodas vietnēs flv-mp3.com (projekts no uppodʻa) un plūsmas atskaņotājs . Kad katrs bija izveidojis nelielu kule, pirmais ātri tika atcelts par labu kombinācijai, kas nodrošina pašreizējo api. kad laiks ir parādījies, iekšējais zarns mani neļāva (kaut arī dažiem cilvēkiem izdevās nokļūt vtyuhat flv-mp3.com).

Kā jūs zināt, pirmais iespaids ir diezgan maldinošs, un dažreiz priekšroka tiek dota vismazāk piesātinātajai ierīcei (īpaši, ja tā izmanto dzimtās valodas). Šī pieeja bija pieprasīta flv-mp3: pakalpojums sniedz iespēju “montēt” spēlētāju ar noteiktām īpašībām ( veidlapu norādiet atskaņoto failu, ekrānsaudzētāju, izmērus un dažus citus parametrus) un saņemiet izejas kodu, lai ievietotu failu. Jā, šī iespēja var likties ļoti ērta, īpaši cilvēkiem, kuri uzskata, ka html ir spēcīgs ragana, nemaz nerunājot par js un tā tālāk.

Maz ticams, ka tikai periodiski pievienojot videoklipus vietnei, tas veicinās entuziasmu par to, ka pats pastāvīgi „būvē” spēlētāju. Jūs varat arī izpētīt visus iestatījumus un automatizēt to, izmantojot servera valodu. taču šo principu var saukt tikai par izkropļotu (ir daudz vieglāk ielādēt videoklipus pakalpojumā YouTube un saņemt gatavo kodu lejupielādei).

šeit mēs nonākam pie paša lieta, ko jau var pilnībā saukt par burvju. jūs vēlaties saprast javascript maģiju? Es parādīšu, ka tas vispār nav grūti (pat vieglāk nekā konstruktora izmantošana). un palīdzēt ar šo plūsmas atskaņotāju. jūs varat izvēlēties versiju no šejienes , bet pirmā versija, kas tiek izplatīta saskaņā ar GPL3, ir diezgan piemērota jūsu vietnei.

Atskaņotājs atbalsta šādu saturu: flv, mp4, m4v (attēliem - jpg, gif, png). Videoklips tiek atbalstīts kopš 9. versijas, tāpēc nevajadzētu būt atbalsta problēmām.

Lejupielādējiet arhīvu ar atskaņotāju un izkravējiet to. Jums būs nepieciešams augšupielādēt 3 failus vietnē: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf un piemērs / flowplayer-NumVer.min.js , kur NumVer ir tikai versijas numurs, un tas, piemēram, var būt 3.2.7 .

Pirmajā failā ir vadības panelis, otrais - tieši atskaņotājs un trešais ir saite, kas nodrošina api. Pirmajiem diviem failiem (* .swf) jābūt vienā mapē. tagad ir pienācis laiks vienkāršākais kods. tas var būt:

<div id = "player" style = "platums: 640px; augstums: 480px;"> </ div> <skripta tips = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ skripts> <skripta tips =" text / javascript "> plūsmas atskaņotājs (" atskaņotājs "," /src/player/flowplayer-3.2.7.swf ", {}); </ script>

Div elements ar atskaņotāja ID ir konteiners, kurā video tiks noņemts. otrajā rindā ir javascript faila savienojums. Tieši izeja ir atbildīga par vienu funkciju plūsmas atskaņotāju () , kas iztur 3 parametrus:

  1. tā elementa identifikators, kurā videoklips jāatskaņo;
  2. ceļš uz spēlētāju (proti, spēlētājam, nevis uz kontrolēm, kas tiks automātiski ielādētas);
  3. Daži papildu parametri.

Starp citu, papildus identifikatoram jūs varat tieši nodot atsauci uz objektu vai selektoru.

Iepriekš redzamais kods neko nerāda, bet tas dod priekšstatu par to, cik viegli ir savienot plūsmas atskaņotāju ar lapu. Lai izvadītu video, jums jāizveido trešais parametrs, un tas, starp citu, arī ir diezgan vienkāršs.

vienkāršības labad: trešais parametrs (config) ir asociācijas masīvs, kurā var aprakstīt šādus elementus:

  • klips - izmantojot šo taustiņu, varat “veikt” globālus iestatījumus, piemēram, vai vēlaties automātiski sākt buferizāciju (automātiskā buferēšana) vai atskaņošanu (automātisko atskaņošanu), kā satura mērogošanu (mērogošana ar piemērotības vērtību saglabās sākotnējo attēla attiecību, un parastam videoklipam tiks izmantots standarta attēls) varbūt tikai tā). Varat arī norādīt atskaņojamo failu (url) un pat apturēt notikumus (funkcijas, kas tiks izsauktas, piemēram, kad filma sāk spēlēt);
  • atskaņošanas saraksts ir parasts masīvs (saraksts). katrs elements var būt virkne (šajā gadījumā virkne ir atskaņojamā klipa adrese) vai asociācijas masīvs. otrajā gadījumā datu kopu var aplūkot kā datu kopu, kas līdzīga iepriekšējās vienības klipa atslēgai, t.i., jūs varat norādīt, lai izmantotu buferizāciju, sāktu atskaņošanu un tā tālāk;
  • spraudņi - paplašina standarta funkcijas. Viena no iezīmēm ir spēja Russificēt interfeisu tieši uz vietas.

Tagad neliels piemērs, kas ietver iespēju demonstrēšanu:

<div id = "player" style = "platums: 520px; augstums: 330px;"> </ div> <skripta tips = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ skripts> <skripta tips =" text / javascript "> plūsmas atskaņotājs (" atskaņotājs "," /src/player/flowplayer-3.2.7.swf ", {klips: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, atskaņošanas saraksts: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', automātiskā buferēšana: taisnība, automātiskā atskaņošana: taisnība}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], //, lai manipulētu ar spraudņu kontroli: {controls: {url:' flowplayer.controls-3.2.16.swf ', atskaņošanas saraksts: false , // noņem attīšanas pogas stop: true, // pievienot stop pogu skruberis: true // false izslēdz video ritināšanu}}}); </ script>

Prezentētais kods nosaka globālos iestatījumus: atspējot automātiskās atskaņošanas atskaņošanu, atspējot automātisko buferizāciju, mērogojot video, lai ietilptu logā. Kā atskaņojamu failu tiek izmantots attēls un video, un attēla iestatījumi tiek ignorēti (jo tas ir automātiski jāielādē). noklikšķinot uz attēla (vai atskaņošanas pogas), tiek parādīts videoklips. kā jūs varat redzēt, viss ir ļoti vienkāršs. ja vēlaties pievienot citu videoklipu, vienkārši pievienojiet jaunu ierakstu atskaņošanas sarakstam, atdalot to ar komatu. ja ir nepieciešama automātiska atskaņošanas saraksta atskaņošana, asociācijas masīva klipā ir iestatīta automātiskās atskaņošanas vērtība ir patiess.

dokumentācija, kas satur api funkcijas šeit . ja kāds nesaprot angļu valodu - tas nav svarīgi, tur viss ir diezgan skaidrs. un pēc iepriekš minētā koda analīzes ir pilnīgi iespējams saprast, kas atrodas dokos. Es ļoti iesakām, lai pārliecinātos, ka būs „iestatījums”, kas būs pieprasīts.

piemēram, var paskatieties šeit . neaizmirstiet apskatīt pirmkodu (Ctrl + U)

Izdevējs

bezsaistē 1 nedēļa

x64 (aka andi)

Komentāri: 2842 Publikācijas: 395 Reģistrācija: 02-04-2009

Jūs vēlaties saprast javascript maģiju?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью