video invoegen op de pagina: gebruik javascript en flash

1. auteurs

enige tijd geleden noemde ik de video-tag, speciaal geïmplementeerd in html5. Helaas zal het gebruik van de tag echter meer ongemak veroorzaken dan voordeel. daarom zal ik je vertellen over de manier waarop je volledig kunt doen met één video-indeling.

voor één project moest ik de mogelijkheid vinden om video's los te schroeven op de site. Het was niet mogelijk om een ​​speler vanaf nul in een flits te maken (om te beginnen heb ik geen ontwikkelomgeving en heb ik deze niet geleverd), dus het was in feite noodzakelijk om een ​​geschikte kandidaat te vinden in het gezicht van een flashplayer. niets bijzonders ingewikkeld was nodig, want dankzij YouTube-gebruikers zijn zeer eenvoudig te navigeren in dit soort spelers;)

2 kandidaten op de sites flv-mp3.com (een project van uppod'a) en Flowplayer . na elk een kleine por te hebben gemaakt, werd de eerste snel verlaten ten gunste van de combinatie die de huidige api verschafte. in de loop van de tijd heeft de innerlijke darm me niet in de steek gelaten (hoewel sommige mensen erin slaagden om in vtyuhat flv-mp3.com te komen).

Zoals u weet, is de eerste indruk nogal misleidend en wordt soms de voorkeur gegeven aan het minst verzadigde apparaat (vooral als het de moedertaal gebruikt). Het is deze benadering die veel gevraagd was op flv-mp3: de service biedt de mogelijkheid om een ​​speler te "assembleren" met specifieke kenmerken (in formulier geef het bestand aan dat wordt afgespeeld, de screensaver, dimensies en enkele andere parameters) en ontvang de uitvoercode om het bestand in te voegen. Ja, de optie lijkt erg handig, vooral voor mensen die html als een sterke heks beschouwen, om nog maar te zwijgen van js enzovoort.

alleen de periodieke toevoeging van video's aan de site zal waarschijnlijk niet bijdragen aan het enthousiasme van het constant "bouwen" van de speler zelf. Als alternatief kunt u alle instellingen verkennen en automatiseren via de servertaal. maar dit principe kan alleen vervormd worden genoemd (het is veel gemakkelijker om video's op YouTube te laden en de juiste code te krijgen om te downloaden).

hier komen we bij het punt dat al volledig een tovenares kan worden genoemd. Wil je javascriptmagie begrijpen? Ik zal laten zien dat het helemaal niet moeilijk is (zelfs gemakkelijker dan een constructeur te gebruiken). en help met deze flowplayer. je kunt een versie kiezen vanaf hier , maar de allereerste versie die wordt verspreid onder GPL3 is redelijk geschikt voor uw site.

De speler ondersteunt het afspelen van de volgende inhoud: flv, mp4, m4v (voor afbeeldingen - jpg, gif, png). De video wordt ondersteund sinds versie 9, dus er zouden geen ondersteuningsproblemen zijn.

Download het archief met de speler en pak het uit. U moet 3 bestanden naar de site uploaden: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf en example / flowplayer-NumVer.min.js , waarbij NumVer slechts het versienummer is, en kan bijvoorbeeld 3.2.7 zijn .

Het eerste bestand bevat het configuratiescherm, het tweede - rechtstreeks de speler en de derde is de koppeling die api biedt. De eerste 2 bestanden (* .swf) moeten zich in dezelfde map bevinden. nu is het tijd voor de eenvoudigste code. het kan zijn:

Het div- element met de speler-ID is de container waarin de video wordt losgeschroefd. in de tweede regel is de javascript-bestandsverbinding. Direct voor de output is verantwoordelijk een functie flowplayer () , die 3 parameters doorgeeft:

1. de identifier van het element waarin de video moet worden afgespeeld;
2. het pad naar de speler (namelijk naar de speler, en niet naar de besturingselementen die automatisch worden geladen);
3. Enkele aanvullende parameters.

Overigens kunt u naast de identifier ook direct een verwijzing naar een object of selector doorgeven.

De bovenstaande code geeft niets weer, maar geeft een idee van hoe gemakkelijk het is om een ​​flowplayer aan een pagina te koppelen. Om video uit te voeren, moet je een derde parameter maken, en dit is trouwens ook vrij eenvoudig.

voor de eenvoud: de derde parameter (config) is een associatieve array waarin de volgende elementen kunnen worden beschreven:

• clip - met behulp van deze toets kunt u algemene instellingen "maken", bijvoorbeeld of u automatisch wilt bufferen (autoBuffering) of wilt spelen (autoPlay), hoe u de inhoud moet schalen (schaal met de waarde van fit behoudt de originele beeldverhouding en voor normale video zal worden gebruikt, misschien alleen het). U kunt ook het bestand dat wordt afgespeeld (url) specificeren en zelfs gebeurtenissen onderbreken (functies die worden opgeroepen, bijvoorbeeld wanneer de film begint te spelen);
• afspeellijst is een reguliere array (lijst). elk element kan een tekenreeks zijn (in dit geval de tekenreeks is het adres van de clip die wordt afgespeeld) of een associatieve array. in het tweede geval kan de dataset worden bekeken als een dataset die vergelijkbaar is met de clip- toets van het vorige item, d.w.z. u kunt opgeven om buffering te gebruiken, het afspelen te starten, enzovoort;
• plug-ins - dient om standaardfuncties uit te breiden. Een van de functies is de mogelijkheid om de interface ter plekke Russify te maken.

Nu een klein voorbeeld dat een demonstratie van de mogelijkheden bevat:

De gepresenteerde code stelt het volgende in als algemene instellingen: uitschakelen van automatisch starten, automatisch bufferen uitzetten, video aanpassen aan het venster. Als een afspeelbaar bestand worden een afbeelding en video gebruikt en de instellingen voor de afbeelding worden overschreven (omdat deze automatisch moet worden geladen). wanneer u op de afbeelding (of de afspeelknop) klikt, wordt de video getoond. zoals je kunt zien, is alles heel eenvoudig. Als u nog een videoclip wilt toevoegen, voegt u eenvoudig een nieuw item toe aan de afspeellijst, gescheiden door een komma. als automatisch afspelen van de afspeellijst vereist is, wordt in de associatieve array- clip ingesteld, is de waarde van autoPlay ingesteld op true.

documentatie met api-functies bevindt zich hier . als iemand het Engels niet begrijpt - het maakt niet uit, alles is daar vrij duidelijk. en na het analyseren van de bovenstaande code is het goed mogelijk om te begrijpen wat zich in de dokken bevindt. Ik adviseer ten zeerste een kijkje, er zal zeker een "setting" zijn waar veel vraag naar is.

voorbeeld kan kijk hier . vergeet niet om naar de broncode te kijken (Ctrl + U)

auteurs

offline 1 week

x64 (aka andi)