HTML5 Videokonvertering
Videor kommer att spelas i alla webbläsare, du kommer att få WebM, MP4 och OGV-format.
Autooptimerar för bra kvalitet och snabba buffringstider.
Konverteringen startar omedelbart, du får videon inom några minuter.
nyligen använt av
Ingen programvara behövs installeras
Ladda bara upp din videofil. Konverteringen sker online.
Brilliant VP9 WEBM
Webm av hög kvalitet, optimerad enligt Googles senaste rekommendationer. Bra kvalitet med korta buffringstider.
WebM - MP4 - OGV
Ditt val, eller alla 3 format
MP4 Snabbstart
Metadatan flyttas till filhuvhudet så att videon spelas upp snabbare och dina användare har en bättre upplevelse
Återupptagbar uppladdning
Dålig anslutning? Uppladningen kommer att fortsätta som om inget hände
Tillåter stora filer
Upp till 4 GB. Gratis för filer upp till ~20MB
Ingen registrering behövs
och vi kommer inte att begära din e-postadress
Bra för bakgrundsvideor för webbplatser
Ta bort ljudet för att minska filstorleken
Ladda upp sedan Ladda ner
Ladda upp videoklippet för att starta konverteringen. När du är klar kan du ladda ner den konverterade filen
Virusfri & reklamfri
Inga virus eller annonser kommer att införas i dina filer
Automatisk videokvalitet
Automatisk optimering för bästa hastighet och kvalitet.
Lämmna en kommentar
Så här använder du HTML5-bakgrundsvideor på din webbplats
För att använda bakgrundsvideor, levererar du idealiskt dem i 3 versioner. Det är MP4, OGV och WEBM. OGV är inte riktigt nödvändigt om du inte vill stödja de gamla webbläsarna Firefox 3.5 & 3.6, Opera 10.5 och Chrome 3, 4, & 5.
Du kan använda en HTML5-videotagg som
<video autoplay loop muted poster="media/image/road.jpg" id="background">
<source src="media/video/road.mp4" type="video/mp4">
<source src="media/video/road.webm" type="video/webm">
<source src="media/video/road.ogv" type="video/ogg">
</video>
Ovanstående kod anger också en thumbnail. Den visas medan videon laddas eller i webbläsare som inte kan spela upp videon. För att skapa en thumbnail kan du spela upp videon på datorn, pausa den och använda shift + command + 4 (MAC. I Windows kan du använda standardverktyget Snipping-tool.
Och sen formaterar du det här med CSS:
#background {
display:none;
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50% translateY(-50%;
transform: translateX(-50% translateY(-50%;
}
Men vi visar bara backgrundsvideor på större enheter. Det tar upp för mycket systemresurser på mobilenheter. Så vi lägger till denna mediefråga (ersätt minbredd: 62em med ett värde från din egen css-ram omd du vill
@media (min-width: 62em {
#background {
display:block;
}
}