videoinspelning på sidan: använd javascript och flash

  1. Publikationsförfattare
  2. x64 (aka andi)

för en tid sedan nämnde jag videotaggen, särskilt implementerad i html5

för en tid sedan nämnde jag videotaggen, särskilt implementerad i html5. men tyvärr kommer användningen av taggen att leda till mer besvär än hellre. Därför berättar jag om hur du helt kan göra med ett videoformat.

för ett projekt behövde jag hitta möjligheten att avskärma videor på webbplatsen. Det var inte möjligt att göra en spelare från början till en blixt (till en början har jag ingen utvecklingsmiljö och gav inte den), så det var nödvändigt att hitta en lämplig kandidat inför en flash-spelare. inget särskilt komplicerat krävs, eftersom tack vare YouTube-användare är det mycket enkelt att navigera i den här typen av spelare;)

2 kandidater som finns på platserna flv-mp3.com (ett projekt från uppod'a) och Flowplayer . Efter att ha gjort en liten poke var den första en gång övergiven till förmån för den kombinera som ger nuvarande api. som tiden har visat, släppte inre magen mig inte (även om vissa lyckades komma in i vtyuhat flv-mp3.com).

Som du vet är första intrycket ganska bedrägligt, och ibland ges ibland den minst mättade enheten (speciellt om den använder modersmål). Det är detta tillvägagångssätt som efterfrågades på flv-mp3: tjänsten ger möjlighet att "montera" en spelare med specificerade egenskaper (i formen ange filen som spelas, skärmsläckaren, dimensioner och några andra parametrar) och få utmatningskoden för att infoga filen. Ja, alternativet kan tyckas mycket bekvämt, särskilt för personer som anser html en stark häxa, för att inte tala om js och så vidare.

bara det periodiska tillägget av videor till webbplatsen är osannolikt att bidra till entusiasmen att ständigt "konstruera" spelaren själv. Alternativt kan du utforska alla inställningar och automatisera via serverns språk. men den här principen kan bara kallas förvrängd (det är mycket lättare att ladda upp videor på YouTube och få klar kod för nedladdning).

här kommer vi till själva saken som redan kan kallas till fullo en trollkarl. vill du förstå javascript magi? Jag ska visa att det inte alls är svårt (ännu enklare än att använda en konstruktör). och hjälp med denna flödesspelare. du kan välja en version härifrån , men den allra första versionen som distribueras under GPL3 är ganska lämplig för din webbplats.

Spelaren stöder uppspelning av följande innehåll: flv, mp4, m4v (för bilder - jpg, gif, png). Videon stöds sedan version 9, så det borde inte finnas några supportproblem.

Ladda ner arkivet med spelaren och packa upp det. Du måste ladda upp 3 filer till webbplatsen: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf och example / flowplayer-NumVer.min.js , där NumVer är bara versionsnumret, och kan till exempel vara 3.2.7 .

Den första filen innehåller kontrollpanelen, den andra - direkt spelaren och den tredje är länken som ger api. De första 2 filerna (* .swf) måste vara i samma mapp. nu är det dags för den enklaste koden. det kan vara:

<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 "> flödesspelare ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Div- elementet med spelarens ID är den behållare där videon kommer att skruvas loss. i den andra raden är javascript filanslutningen. Direkt för utgången är ansvarig en funktionsflödesplayer () som passerar 3 parametrar:

  1. ID för det element där videon ska spelas
  2. vägen till spelaren (nämligen till spelaren, och inte till de kontroller som automatiskt laddas);
  3. Några ytterligare parametrar.

Förresten, förutom identifieraren, kan du direkt skicka en referens till ett objekt eller en väljare.

Koden ovan visar ingenting, men det ger en uppfattning om hur lätt det är att ansluta en flödesspelare till en sida. För att kunna spela ut video måste du skapa en tredje parameter, och det är för övrigt också ganska enkelt.

för enkelhet: den tredje parametern (config) är en associativ array där följande element kan beskrivas:

  • klipp - med den här nyckeln kan du göra "globala inställningar", till exempel om du vill starta buffering automatiskt (autoBuffering) eller spela (autoPlay), hur du skalar innehållet (skalning med värdet av passform håller det ursprungliga bildförhållandet och för normal video används, kanske bara det). Du kan också ange filen som ska spelas (url), och till och med avbryta händelser (funktioner som kommer att ringas till, till exempel när filmen börjar spela);
  • spellista är en vanlig serie (lista). varje element kan vara en sträng (i detta fall är strängen adressen till det klipp som spelas), eller en associativ array. i det andra fallet kan datasatsen ses som en dataset som liknar klippnyckeln från föregående objekt, dvs du kan ange att använda buffering, börja spela osv.
  • plugins - tjänar till att utöka standardfunktioner. En av funktionerna är möjligheten att ryska gränssnittet direkt på plats.

Nu ett litet exempel som inkluderar en demonstration av möjligheterna:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> script / script : 'fit'}, spellista: [{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 '], // för att manipulera plugins kontrollerna: {controls: {url:' flowplayer.controls-3.2.16.swf ', spellista: false , // tar bort spolningsknapparna stoppa: true, // add stop scrubber: true // false inaktiverar rullning av videon}}}); </ script>

Den presenterade koden ställer in följande som globala inställningar: inaktiverar automatisk startavspelning, inaktiverar automatisk buffering och skalar video för att passa fönstret. Som en spelbar fil används en bild och video, och inställningarna för bilden överskridits (eftersom den ska laddas automatiskt). När du klickar på bilden (eller uppspelningsknappen) visas videon. som du kan se är allt väldigt enkelt. Om du vill lägga till ett annat videoklipp, lägg bara till ett nytt objekt i spellistan, åtskilda av ett kommatecken. Om automatisk uppspelning av spellistan är nödvändig, ställs in i det associativa gruppklippet, värdet för autoPlay är satt till true.

Dokumentation som innehåller api-funktioner finns här . om någon inte förstår engelska - det spelar ingen roll, allt är helt klart där. och efter att ha analyserat koden ovan är det ganska möjligt att förstå vad som finns i bryggorna. Jag rekommenderar starkt en titt, förvisso kommer det att finnas en "inställning" som kommer att vara efterfrågan.

Exempel kan kolla här . glöm inte att titta på källkoden (Ctrl + U)

Publikationsförfattare

offline 1 vecka

x64 (aka andi)

Kommentarer: 2842 Publikationer: 395 Registrering: 02-04-2009

Vill du förstå javascript magi?