Met de HTML5-videotag kun je eenvoudig video toevoegen aan je webpagina's. Maar hoewel het oppervlakkig lijkt, zijn er een heleboel dingen die u moet doen om uw video te laten werken. In deze zelfstudie doorloopt u de stappen om een pagina te maken in HTML5 die video uitvoert in alle moderne browsers.
- Je eigen HTML5-video hosten versus YouTube gebruiken
- Snel overzicht van video-ondersteuning op internet
- Maak en bewerk je video
- Converteer de video naar Ogg voor Firefox
- Converteer de video naar MP4 voor Safari
- Converteer de video naar FLV voor Internet Explorer
- Voeg het video-element toe aan uw webpagina
- Voeg JavaScript en Flash Player toe om Internet Explorer aan het werk te krijgen
- Test in zoveel browsers als je kunt
Je eigen HTML 5-video hosten versus YouTube gebruiken
YouTube is een geweldige site. Het maakt het eenvoudig om video snel in webpagina's te embedden, en op enkele kleine uitzonderingen na is het vrij naadloos in de uitvoering van die video's. Als je een video op YouTube plaatst, kun je er vrij zeker van zijn dat iedereen deze kan bekijken.
Maar YouTube gebruiken om uw video's te embedden heeft een aantal nadelen
De meeste problemen met YouTube zijn aan de kant van de consument en niet zozeer aan de ontwerperzijde, zoals:
- Langzaam zoeken en indexeren
- Serverstoringen
- Inhoud die (schijnbaar) willekeurig wordt verwijderd
- Te veel slechte inhoud
Maar er zijn enkele redenen waarom YouTube ook slecht is voor contentontwikkelaars, waaronder:
- Maximale lengte van 10 minuten voor video's (voor gratis accounts)
- Slechte uploadprestaties
- YouTube verkrijgt onbeperkte gebruiksrechten voor je video
- Elke YouTube-gebruiker verkrijgt onbeperkte gebruiksrechten voor je video
HTML5-video biedt enkele voordelen via YouTube
Met HTML5 voor video kun je elk aspect van je video beheren, van wie het kan bekijken, hoe lang het is, wat de inhoud bevat, waar het wordt gehost en hoe de server presteert. En HTML5-video geeft je de mogelijkheid om je video in zoveel indelingen te coderen als je nodig hebt om ervoor te zorgen dat het maximale aantal mensen het kan bekijken. Uw klanten hebben geen plug-in nodig of wachten tot YouTube een nieuwere versie uitbrengt.
Natuurlijk biedt HTML5 Video enkele nadelen
Waaronder:
- Je moet je video coderen in ten minste drie verschillende codecs
- Je moet wat JavaScript toevoegen om ervoor te zorgen dat browsers die HTML5 niet ondersteunen, werken
- Uw server moet in staat zijn om te voldoen aan de bandbreedtevereisten voor het hosten van video's
Lees hieronder verder
02 van 10Snel overzicht van video-ondersteuning op internet
Video toevoegen aan webpagina's is lang een moeilijk proces geweest. Er waren zoveel dingen die fout konden gaan:
- Eerst gebruikt u de tag om je video in je pagina in te sluiten. MAAR die tag is verouderd ten gunste van een andere tag. En sommige browsers hebben het toch nooit goed ondersteund.
- Dus u schakelt naar de tag, maar oudere browsers ondersteunen dit niet en nieuwere browsers zijn vaag in de ondersteuning ervan.
- Dan denk je dat Flash! En codeer je video als een FLV-bestand. Maar Flash wordt niet ondersteund op veel mobiele apparaten en veel mensen haten Flash, ongeacht hoe het wordt gebruikt (25% van de respondenten in mijn poll die vragen wat jij van Flash vindt, zei dat ze Flash op geen enkele manier kunnen verdragen).
- Dus je besluit om je video te uploaden naar een video-insluitingssite zoals YouTube, maar dan heb je de problemen met YouTube die we hebben besproken.
- Uiteindelijk besluit u HTML5 te gebruiken, maar Internet Explorer ondersteunt dit niet (niet tot Internet Explorer 9). En zelfs als u dat doet, zijn er twee videocodecormen die worden ondersteund en slechts één browser die beide kan gebruiken. Browserondersteuning voor videocodecs en containers
Dus wat moet je doen? Opgeven voor video is voor de meeste sites niet langer een optie, omdat de video steeds belangrijker wordt. En veel sites zijn met succes overgestapt op video.
De volgende pagina's van dit artikel zullen u helpen bij het toevoegen van video aan uw webpagina's die werken in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 en 4, iPhone en Android, Flash en Internet Explorer 7 en 8. U zult hebben ook de sleutels die u nodig hebt om indien nodig ondersteuning voor andere oudere browsers toe te voegen.
Lees hieronder verder
03 of 10Maak en bewerk je video
Het eerste dat u nodig hebt wanneer u een video op een webpagina gaat plaatsen, is de daadwerkelijke video. Je kunt continu fotograferen en daarna bewerken om een functie te maken, of je kunt een script maken en het van tevoren plannen. Hoe dan ook werkt goed, het is gewoon alles waar je je comfortabel bij voelt. Als je niet weet welk type video je moet maken, bekijk dan deze ideeën in de Desktop Video Guide:
- Family Video Projects
- Marketing- en promotievideo's
- Video virtuele rondleidingen
- Hoe video's
- Bruiloftvideo's
Leer hoe u video van hoge kwaliteit kunt opnemen
Zorg dat je weet hoe je binnen en buiten opneemt en hoe je audio opneemt. Verlichting is ook erg belangrijk - schoten die te fel zijn, doen de ogen pijn en te donker zien er alleen modderig en onprofessioneel uit. Zelfs als je alleen van plan bent om een 30 seconden durende video op je site te hebben, hoe hoger de kwaliteit, des te beter zal het reflecteren op je website.
Onthoud ook dat auteursrecht van toepassing is op alle geluiden of muziek (evenals beeldmateriaal) die u mogelijk in uw video wilt gebruiken. Als u geen toegang heeft tot een vriend die een nummer voor u kan schrijven en afspelen, moet u royaltyvrije muziek op de achtergrond afspelen. Er zijn ook plaatsen waar u beeldmateriaal kunt opslaan om toe te voegen aan uw video's.
Uw video bewerken
Het maakt niet uit welke bewerkingssoftware u gebruikt, zolang u er maar bekend mee bent en deze effectief kunt gebruiken. Gretchen, de Desktop Video Guide, heeft een aantal professionele tips voor het bewerken van video's die je kunnen helpen bij het bewerken van je video's, zodat deze er fantastisch uitzien.
Bewaar uw video op MOV of AVI (of MPG, CD, DV)
Voor de rest van deze tutorial gaan we ervan uit dat je je video hebt opgeslagen in een vorm van hoge kwaliteit (niet-gecomprimeerd) formaat zoals AVI of MOV. Hoewel je deze bestanden kunt gebruiken zoals ze zijn, kom je alle problemen tegen met video's die we al hebben besproken. Op de volgende pagina's wordt uitgelegd hoe u uw bestand in drie typen converteert, zodat het door het grootste aantal browsers kan worden bekeken.
04 van 10Converteer de video naar Ogg voor Firefox
Het eerste formaat dat we zullen converteren is Ogg (ook wel Ogg-Theora genoemd). Dit formaat is er één dat Firefox 3.5, Opera 10.5 en Chrome 3 allemaal kunnen bekijken.
Helaas, terwijl Ogg browserondersteuning biedt, bieden veel van de bekende videoprogramma's die u kunt kopen (Adobe Media Encoder, QuickTime, enz.) Geen Ogg-conversieoptie. Dus de enige manier om uw video naar Ogg te converteren, is om een conversieprogramma op het web te vinden.
Conversie-opties
Er is een online tool genaamd Media-Convert die claimt verschillende formaten video (en audio) om te zetten naar andere video- (en audio) formaten. Toen we het probeerden met mijn testvideo van 3 seconden, konden we het niet laten werken op mijn Mac. Maar misschien heb je meer geluk. Deze site heeft het voordeel gratis te zijn.
Enkele andere hulpmiddelen die we hebben gevonden zijn onder meer:
- Miro Video Converter (Windows Macintosh) - Dit programma heeft het voordeel van het converteren naar zowel Ogg als MP4 (H.264) en het is open source.
- Koyote Video Converter (Windows)
- Free Video Converter We denken dat dit zowel een Windows- als een Macintosh-versie heeft, maar het was moeilijk te zeggen op hun site
- Simple Theora Encoder (Macintosh) - dit is degene die we vaak gebruiken.
Zodra je je video in het Ogg-formaat hebt opgeslagen, sla je deze op naar een locatie op je website en ga je naar de volgende pagina om deze naar andere indelingen voor andere browsers te converteren.
Lees hieronder verder
05 van 10Converteer de video naar MP4 voor Safari
Het volgende formaat waarin je je video moet converteren, is MP4 (H.264-video), zodat het kan worden afgespeeld op Safari 3 en 4 en de iPhone en Android. Bovendien kunnen H.264-video's eenvoudig worden geconverteerd naar FLV-bestanden om te bekijken op Flash.
Dit formaat is beter beschikbaar in commerciële producten en je hebt waarschijnlijk al een programma dat naar MP4 zal converteren als je een video-editor hebt. Als u Adobe Premiere heeft, kunt u de Adobe Video Encoder gebruiken of, als u QuickTime Pro heeft, ook werken. Veel van de converters die we op de vorige pagina hebben besproken, zullen ook video's converteren naar MP4.
- MediaConvert - Een online AWS-tool.
- Miro Video Converter (Windows Macintosh) - Dit programma heeft het voordeel van het converteren naar zowel Ogg als MP4 (H.264) en het is open source.
- SUPER (Windows) - converteert veel verschillende bestandstypen naar MP4 en FLV
- Free Video Converter We denken dat dit zowel een Windows- als een Macintosh-versie heeft, maar het was moeilijk te zeggen op hun site.
Sla uw MP4-bestand op naar uw website en dan moet u het naar Flash converteren zodat Internet Explorer het kan gebruiken.
06 van 10Converteer de video naar FLV voor Internet Explorer
De eenvoudigste manier om video's naar FLV te converteren, is door Flash zelf te gebruiken. Dat is hoe we mijn video's naar Flash converteren. Maar als u geen Flash hebt, zijn hier twee populaire hulpprogramma's voor het converteren van bestanden naar FLV:
- SUPER (Windows) - converteert veel verschillende bestandstypen naar MP4 en FLV
- ffmpegX (Macintosh) - converteert veel verschillende bestandstypes naar Mp4 en FLV.
Sla uw FLV-bestand op uw website op en de volgende pagina laat u zien hoe u de HTML schrijft, zodat u uw video's kunt afspelen.
Lees hieronder verder
07 van 10Voeg het video-element toe aan uw webpagina
Het is heel gemakkelijk om HTML 5 te gebruiken om video toe te voegen aan webpagina's. De meeste moderne browsers ondersteunen HTML 5-video, hoewel ze dit niet allemaal op dezelfde manier ondersteunen. Maar dit betekent dat als u uw video opslaat als Ogg- en MP4-indeling, u slechts vier of vijf regels HTML kunt schrijven om deze in de meeste moderne browsers weer te geven (met uitzondering van Internet Explorer 8). Hier is hoe:
Schrijf de HTML 5 doctype marker zodat browsers weten dat ze HTML 5 verwachten:
- Maak uw webpagina zoals u deze normaal zou maken:
- In het lichaam plaats je de
- Bepaal welke kenmerken je wilt dat je video bevat: we raden aan om de besturing en de voorbelasting te gebruiken. Gebruik de posteroptie als je video geen goede eerste scène heeft.
- autoplay - om te starten zodra het is gedownload
- -besturing - laat uw lezers de video besturen (pauze, terugspoelen, snel vooruitspoelen)
- loop - start de video vanaf het begin wanneer deze eindigt
- preload - pre-download de video zodat deze sneller klaar is als de klant erop klikt
- poster - definieer de afbeelding die u wilt gebruiken wanneer de video wordt gestopt
- Voeg vervolgens de bronbestanden voor de twee versies van uw video (MP4 en OGG) toe in de
- Open de pagina in Chrome 1, Firefox 3.5, Opera 10 en / of Safari 4 en zorg ervoor dat deze correct wordt weergegeven. Je zou het moeten testen in tenminste Firefox 3.5 en Safari 4 - omdat ze elk een andere codec gebruiken.
Dat is het. Zodra je deze code hebt geïnstalleerd, heb je een video die werkt in Firefox 3.5, Safari 4, Opera 10 en Chrome 1. Maar hoe zit het met Internet Explorer?
Internet Explorer houdt niet van HTML 5 of de
In de volgende sectie zullen we het hebben over wat u kunt doen om IE 8 goed te laten spelen met uw HTML 5-videotags en een video weer te geven. Je moet Flash gebruiken.Het goede nieuws is dat IE 9 naar verwachting HTML 5 en de videotag ondersteunt.
08 van 10Voeg JavaScript en Flash Player toe om Internet Explorer aan het werk te krijgen
U hebt misschien gemerkt dat er in de HTML van de vorige pagina geen bronregel voor het FLV-bestand was. En als u die pagina in Internet Explorer hebt getest, zou deze niet werken. Dat komt omdat Internet Explorer HTML 5 niet herkent en OGG- of MP4-video's niet native kan afspelen. Om Internet Explorer 7 en 8 te laten werken, moet je de video als Flash laten afspelen. Maar er zijn meer stappen om het aan het werk te krijgen dan alleen het toevoegen van het FLV-bestand.
Stap 1: Download een Flash Videospeler voor uw website
We raden aan om FlowPlayer te krijgen omdat het een open source Flash-videospeler is die u op uw webserver kunt installeren en gebruiken wanneer u Flash-video hebt om te spelen. De gratis versie van FlowPlayer voegt advertenties toe aan je video's, maar je kunt ook commerciële licenties kopen als je ze nodig hebt.
Volg de instructies op de FlowPlayer-site om FlowPlayer op uw website te installeren. Samengevat installeert u twee SWF-bestanden en een JavaScript-bestand op uw site. Onderaan je HTML, (vóór de tag) voeg je een regel toe:
Maar Internet Explorer zal de video nog steeds niet afspelen, u moet hem leren HTML 5-tags te herkennen.
Stap 2: Overtuig Internet Explorer om HTML 5-tags te lezen
Er is een handig script op Google Code genaamd "HTML Shiv" dat IE HTML 5-elementen helpt herkennen. Dus in de
van uw HTML-document waarnaar u wilt verwijzen. Het is het beste om het in IE conditionele opmerkingen te plaatsen, zodat andere browsers niet in de war raken:
Oké, nu zal IE het herkennen
