Share
Vandaag zal ik je leren hoe je video op internet kunt weergeven met een open-source flash-speler. We zullen alle stappen behandelen, waaronder het converteren van een video naar het FLV-bestandsformaat en het insluiten van een aangepaste speler met behulp van SWFObject. Het beste deel is dat de winkel Adobe Flash niet nodig is.
De eerste stap van het insluiten van een video is het coderen van een video in FLV-indeling. Bijna alle online webspelers gebruiken .flv als de standaard voor het afspelen van bestanden.
Voor deze tutorial kun je de voorbeeldvideo downloaden die ik heb gebruikt genaamd Trusted Computing op archive.org (geregisseerd door: Benjamin Stephan en Lutz Vogel.)
Als u geen Macromedia Flash hebt, ga dan naar 1b.
Open Macromedia Flash Video Encoder en voeg de video toe aan de wachtrij Bestand> Toevoegen. Klik vervolgens op Start wachtrij bij Bestand> Start wachtrij en u bent klaar met het coderen van het bestand in .flv-indeling.
Opmerking: de aanpassing bij deze stap is minimaal. Ga naar stap 1b of 1c voor meer controle over videoformaat en compressie.
Er zijn veel opties bij het coderen in FLV. De Windows-optie voor deze zelfstudie is de Riva FLV Encoder, omdat deze gratis en aan te passen is.
Download en installeer de Riva FLV Encoder vanaf de website van Riva.
Eenmaal geopend, voegt u de video toe aan het video-invoervak met behulp van de bladerknop. Het programma voert de video automatisch uit in dezelfde map.
Vervolgens passen we de voorkeuren aan de rechterkant aan. Voor deze eenvoudige video gebruiken we het videogrootte van 320x240 en houden we alle andere instellingen als standaard. Klik op FLV-codering onder aan het programma om de codering te starten.
Opmerking: probeer de bestandsgrootte lager te houden door de instellingen aan te passen en de resolutie laag te houden. Hoe groter de video, hoe langer het duurt om te laden.
De keuze voor Mac in deze tutorial is ffmpegX.
Download en installeer de ffmpegX-encoder vanaf hun website.
Eenmaal geopend, voegt u de video toe aan de video-invoervak met behulp van de knop Openen. Het programma slaat de uitvoer van de video op in dezelfde map, maar u moet de bestandsnaam bijwerken naar TrustedComputing_LAFKON_LOW.flv.
Wijzig vervolgens het doelformaat in FLV en klik op coderen. Klik op de verschillende tabbladen om de videoformaat en compressie te wijzigen.
Opmerking: probeer de bestandsgrootte lager te houden door de instellingen aan te passen en de resolutie laag te houden. Hoe groter de video, hoe langer het duurt om te laden.
In deze tutorial gebruiken we de open source MPW Player voor het afspelen van onze Flash-bestanden.
De belangrijkste redenen zijn omdat de MPW-speler open source is en zowel eenvoudige aanpassingen als meer diepgaande aanpassingen biedt.
Ga naar de MPW Player-website om de speler te downloaden. De website is in het Spaans, maar klik gewoon op de blauwe downloadknop.
De benodigde bestanden zijn mpw_player.swf en de map include. Opmerking: plaats het gecodeerde FLV-bestand, TrustedComputing_LAFKON_LOW.flv, in dezelfde map als de speler en html-bestand.
Maak een leeg html-document en voeg scripttags toe voor swfobject in de kop van het document. Het bestand swfobject.js bevindt zich in de map includes in de download van mpw player.
Vervolgens voegen we de eigenlijke flash-speler in en bewerken we één regel. Plaats de naam van het videobestand, TrustedComputing_LAFKON_LOW.flv, onder de variabele flv.
Deze div wordt vervangen door de JavaScript met swfobject
Nu hebben we een functionerende speler met de standaardlook.
Het aanpassen van de speler is erg belangrijk en is de reden waarom we de MPW Player gebruiken. Om updates aan de speler te maken, hoeven we alleen variabelen in JavaScript toe te voegen.
De eerste aanpassing aan de speler zal een voorbeeldfoto voor de video toevoegen. Voeg de variabele jpg toe en vervolgens de locatie van de foto om een foto toe te voegen. De foto die in de zelfstudie wordt gebruikt, heet images_27_6 / how-to-play-video-using-an-open-source-player_10.jpg - een screenshot van de video. Opmerking: vergeet de script-tags niet in de kop van het document.
Deze div wordt vervangen door de JavaScript met swfobject
Voeg meer variabelen toe om verdere wijzigingen aan te brengen. Hier is een voorbeeld van alle standaardvariabelen toegevoegd met opmerkingen over elk doel.
Deze div wordt vervangen door de JavaScript met swfobject
Door de speler in te sluiten met SWFObject kunnen we een afbeelding of tekst van een tijdelijke aanduiding gebruiken in het geval de gebruiker geen Flash of JavaScript heeft. Een grote reden hiervoor is dat veel computers of apparaten zoals de iPhone geen Flash of JavaScript hebben.
In dit voorbeeld gebruiken we een eenvoudige afbeelding, maar elke code werkt. SWFObject vervangt alle inhoud binnen een div. Waarnaar wordt verwezen. Wanneer een gebruiker JavaScript of Flash mist, geeft de browser eenvoudig de inhoud van de div weer. In dit geval is de weergegeven inhoud gewoon hetzelfde jpg-bestand, images_27_6 / how-to-play-video-gebruik-een-open-source-player_10.jpg, dat we hebben gebruikt voor een voorbeeld.
Om meer dan één speler op één pagina te plaatsen, moet je ervoor zorgen dat elke verwezen div een unieke naam heeft. Werk vervolgens de JavaScript-verwijzing bij zodat deze overeenkomt met de div-id.
De MPW-speler kan ook als audiospeler worden gebruikt. Het enige wat we moeten doen is de variabele mp3 toevoegen in plaats van flv.
MPW Player is open source, wat betekent dat iedereen de speler kan downloaden en wijzigingen kan aanbrengen. Om de broncode voor de speler te downloaden, bezoek deze webpagina en download "MPW Player SRC".
MPW Player is niet perfect voor elke webvideo. Probeer deze andere gratis spelers uit, want deze werken misschien beter voor je.
Deze tutorial liet je zien hoe je een video in flv codeert en een open source flash-speler aanpast om video en audio op internet weer te geven.
Accentsconagua