Share
Als u ooit streamingvideo in uw ontwerpen wilt opnemen, maar u zich niet wilt bezighouden met rommelige codeoplossingen (of Flash), hebben we twee snelle en eenvoudige oplossingen voor u. Vandaag gaan we een kijkje nemen naar wat elke oplossing biedt voor webontwerpers en hoe ze beide in uw eigen projecten kunnen gebruiken.
Oppervlakkig gezien, is het streamen van video via een webpagina niet iets dat veel webontwerpers in hun hoofd hebben? Dit is begrijpelijk omdat alleen die twee woorden ("Web" en "Video") een kennisbasis impliceren die het best elders in het Envato-universum te vinden is?
? Maar wat als ik u zou vertellen dat het toevoegen van streaming video aan uw pagina's nu gemakkelijker is dan het toevoegen van een jpg. Nu heb ik je aandacht? laten we duiken in de goede dingen:
Voordat ik u stap voor stap door het proces laat lopen, laten we eerst de geschiedenis van 'streaming webvideo' bekijken vanuit het oogpunt van webontwerpers:
Laten we net doen of u aan een project werkt en u de basiscodering aan de voorzijde hanteert. In het verleden was het toevoegen van streaming video aan onze ontwerpen een behoorlijk gecompliceerd proces - je moet weten (en een licentie hebben voor) Adobe Flash. Ervan uitgaande dat je Flash hebt en je je weg ernaartoe kent, moet je de video in het juiste formaat krijgen, deze in Flash importeren, het archaïsche proces van het instellen van de video doorlopen en het vervolgens exporteren. Ten slotte zou je het goed moeten integreren in je website. Doorgewinterde Flash-veteranen kunnen dit misschien snel verwijderen, maar voor de meeste mensen aan de ontwerpkant van de dingen is het een hoofdpijn.
Een andere mogelijke oplossing zou zijn om een dienst zoals YouTube of Vimeo te gebruiken. Dit is prima voor de meeste mensen, maar hoe zit het met degenen onder ons die gewoon video op internet willen weergeven zonder de branding of andere extra's die sites zoals YouTube en Vimeo toevoegen? Tot voor kort was er hier echt geen eenvoudige oplossing voor.
Dankzij de belofte van het HTML 5 Video rookgordijn, merkte ik dat ik onlangs een aantal van de nieuwe "streaming video-oplossingen" probeerde uit te proberen. Dat was natuurlijk precies het moment waarop Google het webM in zijn liefdevolle omhelzing bracht en dingen veel gecompliceerder werden dan ik had verwacht. Ik gaf me in wezen over en stampte weg met een "Let God sort it out" -houding. Het is duidelijk dat het debat over het streamen van webvideo nog niet is opgelost.
Een paar jaar geleden schreef ik een artikel, The Rise of Flash Video, dat griezelig een vergelijkbaar debat volgt dat begon toen video daadwerkelijk op het web raakte en de Flash Video-standaard werd gebruikt. Nogmaals, de kern van het argument was: "Er moet een eenvoudigere manier zijn om dit te doen." Raad eens? Nu is het zover.
De afgelopen jaren was Adobe betrokken bij het Open Source Media Framework. Ik heb OSMF altijd gevonden als een verbijsterende reeks technologieën en technieken die, eerlijk gezegd, mijn tanden doen pijn doen. De technologieën zijn serieus cool, erg geavanceerd en leuk om mee te porren - maar ze zijn gericht op ontwikkelaars? en als er een manier is om een eenvoudige oplossing al te ingewikkeld te maken, zullen de hardcore coders van de wereld het vinden. OSMF is niet anders. Als je door de site wandelt, is er echt niet veel in de manier van eenvoudige, plug-and-play-oplossingen voor ons bescheiden ontwerpers om te gebruiken.
Pas als je een paar stappen achteruit doet, wordt het doel van het OSMF-project duidelijk: "om video-afspeelervaringen van hoge kwaliteit te bieden". Dat betekent echt vloeiend laden van video's, echt gladde spelers en geen van de extra dingen die door Vimeo en YouTube worden opgeworpen. Waar dit hele ding voor ons echt interessant wordt, is dat we nu kunnen beginnen met plezier maken en dat je niets nieuws hoeft te leren.
In deze tutorial laat ik je twee manieren zien om dit te bereiken. De eerste is "Drop Dead Simple" en de tweede verhoogt het level naar "Dead Simple". Om aan het spel deel te nemen, hoef je alleen maar een video te uploaden (deze is bijgesloten voor elke oplossing) in een map op een website. Laten we beginnen:
Dit deel is vrij eenvoudig - upload een video naar uw webserver met behulp van een FTP-programma of iets dergelijks. Voor deze demo gebruiken we het bestand "Stockhorn.f4v". Het enige dat je nodig hebt om hier te komen, is de URL van je video. Keep is ergens dat je kunt kopiëren en plakken voor de volgende stap.
In essentie biedt deze site een OSMF-speler voor de massa. Als je een mp4-, flv- of f4v-bestand wilt invoegen op je webpagina zonder een likje Flash, Actionscript of Flex te kennen, dan is dit de plek voor jou. Wat u moet doen, is klikken op de knop Flash Media Playback configureren onder aan de pagina. Hierdoor wordt de pagina Flash Media Playback Setup geopend.
U moet het absolute pad naar de video en de bestandsextensie van de video invoeren. De drie formaten die door Flash worden gebruikt, zijn flv, f4v en H.264. Als u niet zeker weet hoe deze worden gemaakt, kunt u mijn Flash Video Basics-serie bekijken op active.tutsplus. Je moet ook de waarden voor breedte en hoogte van de video invoeren. De waarden voor de ingesloten video zijn 720 X 405. Als je dat hebt gedaan, klik je op de knop Voorbeeld in het gedeelte Voorbeeldspeler en moet je video beginnen te spelen.
Als u Dreamweaver gebruikt, opent u de pagina, selecteert u de tags en plak de code van de speler in de codeweergave. Als u de pagina test, ziet u uw video in de browser worden afgespeeld. Op dit moment hoeft u alleen de html-pagina te uploaden naar het bestand met de video op uw site.
Dat zijn de stappen en als je hierheen gaat, zie je de video spelen. Het enige dat ik anders deed, was een posterframe toevoegen. Meer hierover in de volgende sectie.
Zoals ik aan de top al zei, ik ga hier niet "all techie" gaan, maar er is een andere manier die iets gecompliceerder is dan wat ik zojuist liet zien, dat het vermelden waard is, genaamd Strobe Media-weergave.
Strobe Media Playback gebruikt dezelfde benadering als Flash Media, maar er zit een ton meer vermogen onder de motorkap. U kunt bijvoorbeeld meerdere bitrates gebruiken om verbindingen te detecteren en de juiste video toe te voegen op basis van de verbindingssnelheid van de gebruiker. U kunt de bedieningselementen aanpassen, gebruiken om audio af te spelen, jpg's weergeven en vrijwel alle media die in een Flash SWF worden weergegeven. In dit voorbeeld gaan we dezelfde "geen code" -benadering gebruiken als in de vorige oplossing, maar ik ga een "twist" toevoegen. Als je meewerkt, zijn alle bestanden die je nodig hebt in de map Strobe in de download van deze tutorial te vinden.
Hetzelfde als voorheen - upload een video naar uw webserver met een FTP-programma of iets dergelijks. Voor dit deel van de demo gebruiken we het bestand "GeorgeSquare.mp4". Het enige dat je nodig hebt om hier te komen, is de URL van je video. Keep is ergens dat je kunt kopiëren en plakken voor de volgende stap.
De gewenste versie is de release van Strobe Media Playback 1.5.1. Met Strobe worden bètaversies "Sprints" genoemd en de huidige Sprint biedt ondersteuning voor zaken als de nieuwe Stage Video-functie van de Flash Player. Wanneer u het bestand uitpakt, heeft u een aantal keuzes: plaats de map aan de root van de webserver van uw computer of upload deze naar de root van uw website. Ik heb een map met de naam "smp" gemaakt en alle bestanden naar mijn webserver geüpload.
Een posterframe is een geweldige kans om wat branding te doen met een video.Als het eerste frame van de video daar gewoon gaat zitten en lijkt op een afbeelding, waarom zou u die afbeelding niet gebruiken om te werken. In dit geval heb ik eenvoudig een nieuw Fireworks CS5-document geopend dat overeenkwam met de afmetingen van de video - 1280 bij 720, de items bij elkaar plaatste en als een afgeplatte .jpg-afbeelding in dezelfde map als de video opsloeg.
Deze map bevindt zich in de Strobe-download. Wanneer het wordt geopend, ziet het er nogal bekend uit. Het belangrijkste verschil tussen dit document en het document dat u tegenkwam bij Flash Media Playback, is dat de keuzes veel uitgebreider zijn en de speler een speler is die u bezit? niet één op de site van Adobe. Wanneer de pagina wordt geopend, ziet u dat er veel keuzes zijn. De belangrijkste zijn, voor de doeleinden van deze tutorial:
Parameters insluiten:
Flash vars:
Als je een meer volledige uitleg van deze pagina en de Flash Vars wilt, heeft mijn collega Joseph Labreque een vrij uitgebreid technisch overzicht van Strobe Media Playback op active.tutsplus geplaatst.
U zou uw posterframe in de speler moeten zien verschijnen. Als u niet wilt dat die grote knop Afspelen over het posterframe de eigenschap playButtonOverlay instellen op False in het gebied Flash vars.
Wanneer het bestand opent, speel de film af. Het mooie is dat alle bedieningselementen actief zijn - wat betekent dat als je een HD mp4-bestand gebruikt, je video zal groeien om het scherm te vullen met weinig of geen pixelisatie.
Tenslotte! Welkom in de wereld van het streamen van Flash-video zonder dat je iets hoeft te weten over Flash. Klik hier om dit project op mijn site te zien.
Zoals ik aan het begin van dit stuk heb opgemerkt, denk ik niet dat Flash Video binnenkort zal verdwijnen. Toch is het nu mogelijk om met de komst van een omgeving met meerdere schermen dezelfde video te laten afspelen als een Droid, iPhone, Samsung Galaxy Tablet en je HD-tv. Dit maakt webontwerpers natuurlijk een beetje nerveus omdat? goed? omdat het inbedden van streaming video in het verleden nogal technisch is geweest. Dat is niet echt het geval meer! Zoals ik in dit stuk heb aangegeven, heeft Adobe een aantal oplossingen voor u, als u tekst naar een webpagina kunt kopiëren en plakken.
Als je vindt dat dit interessant is en je echt in OSMF of Strobe wilt graven, moet je echt beginnen met de serie van Joeseph Labreque die in actie is begonnen. tutsplus, terwijl hij veel gedetailleerder ingaat op de technische dingen rond het streaming videodebat.
Accentsconagua