échelle HTML5 Vidéo et fractionner le format pour remplir le site entier

Je souhaite utiliser une vidéo 4: 3 comme arrière-plan sur un site, mais régler la largeur et la hauteur sur 100% ne fonctionne pas, car le format est conservé , donc la vidéo ne remplit pas toute la largeur du site.échelle HTML5 Vidéo et fractionner le format pour remplir le site entier

merci pour votre aide!

ici est mon code html et css

html:

<!DOCTYPE HTML> 
<html land="en"> 

<head> 

<link rel="stylesheet" type="text/css" href="html5video.css" /> 


<title>html 5 video test</title> 


</head> 

<body id="index"> 

<video id="vidtest" autoplay> 
<source src="data/comp.ogv" type="video/ogg" width="auto" > 
</video> 

<div class="cv"> 

<p> 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

</div> 


</body> 
</html>

css:

body 
{ 
background-color:#000000; 
} 



#vidtest { 
position: fixed; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
width: 200%; 
height: 100%; 
z-index: -1000; 
} 

.cv 
{ 
width: 800px; 
position:relative; 
text-align:center; 
margin-top: 100px; 
color:#FFFFFF; 
font-family:"Arial"; 
font-size: 10px; 
line-height: 2em; 
text-shadow: 3px 3px 2px #383838; 
margin-left: auto; 
margin-right: auto; 
}

Source

2010-10-22 Roland

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...] de la même manière que l'élément img - si vous n'en définissez qu'un en largeur et en hauteur, L'autre dimension est automatiquement ajustée de manière appropriée pour que la vidéo conserve son format. Cependant - contrairement à l'élément img - si vous définissez la largeur et la hauteur sur quelque chose qui ne correspond pas au format de la vidéo, la vidéo n'est pas étirée pour remplir la boîte. Au lieu de cela, la vidéo conserve le format correct et est letterboxed à l'intérieur de l'élément vidéo. La vidéo sera rendue aussi grande que possible à l'intérieur de l'élément vidéo tout en conservant le rapport d'aspect.

Source

2010-10-22 21:01:56 drudge

grâce, où est le meilleur endroit pour se plaindre de ce bien? C'est juste une restitution inutile à mon avis. – Roland

vous pouvez toujours utiliser l'espace où la vidéo ** ne joue pas ** pour ajouter des widgets et des choses. :) – drudge

@Roland Les spécifications HTML5 sont encore en cours de rédaction, donc si vous voulez vous plaindre je suis sûr que vous pouvez chercher des façons de le faire :) –

Je travaille autour de ce en javascript en comparant l'ensemble du rapport sur l'élément à la source vidéo, puis à appliquer une CSS transform: https://gist.github.com/1219207

Source

2011-09-15 13:28:06

avait choisi cet hier et ont été aux prises pour une réponse. Ceci est quelque peu similaire à la suggestion de Jim Jeffers, mais cela fonctionne pour la mise à l'échelle x et y, est dans la syntaxe javascript et ne repose que sur jQuery. Il semble fonctionner assez bien:

function scaleToFill(videoTag) { 
    var $video = $(videoTag), 
     videoRatio = videoTag.videoWidth/videoTag.videoHeight, 
     tagRatio = $video.width()/$video.height(); 
    if (videoRatio < tagRatio) { 
     $video.css('-webkit-transform','scaleX(' + tagRatio/videoRatio + ')') 
    } else if (tagRatio < videoRatio) { 
     $video.css('-webkit-transform','scaleY(' + videoRatio/tagRatio + ')') 
    } 
}

Vous allez rencontrer des problèmes si vous utilisez les contrôles natifs comme vous pouvez le voir dans ce violon: http://jsfiddle.net/MxxAv/

J'ai des exigences inhabituelles en raison de toutes les couches d'abstraction dans mon projet actuel. À cause de cela, j'utilise un div wrapper dans l'exemple et la mise à l'échelle de la vidéo à 100% à l'intérieur du wrapper pour éviter les problèmes dans certains des cas de coin que j'ai rencontrés.

Source

2012-10-31 21:09:56 Shane

+1 Pour le ratio X/Y – Yehonatan

vous pouvez utiliser:

min-width: 100%; 
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Source

2014-01-09 15:32:57 Ouadie

cet article était super, merci – iamserious

ce un fil vraiment vieux, je sais, et ce que je propose est pas necesserily la solution que vous cherchez, mais pour toutes les personnes que la terre ici à cause de la recherche de ce que je cherchais: échelle la vidéo pour remplir l'élément conteneur vidéo, en gardant intact rapport

Si vous voulez que la vidéo pour remplir la taille de l'élément <video> mais la vidéo est mise à l'échelle correctement pour remplir le conteneur tout en conservant les proportions. Vous pouvez le faire avec CSS en utilisant object-fit.Tout comme background-size pour les images d'arrière-plan, vous pouvez utiliser les éléments suivants:

video { 
    width: 230px 
    height: 300px; 
    object-fit: cover; 
}

J'espère que cela peut être utile pour certaines personnes.

EDIT: not in all browsers yet.

Source

2015-03-05 00:02:59 Mathias

objet-fit: couverture; OMG JE T'AIME – moeiscool

Je l'utiliser pour remplir la largeur ou la hauteur ... (nécessite jQuery) Cela permet de maintenir le ratio d'aspect et remplit la div. Je sais que la question était de casser la ration d'aspect, mais ce n'est pas nécessaire.

var fillVideo = function(vid){ 
    var video = $(vid); 
    var actualRatio = vid.videoWidth/vid.videoHeight; 
    var targetRatio = video.width()/video.height(); 
    var adjustmentRatio = targetRatio/actualRatio; 
    var scale = actualRatio < targetRatio ? targetRatio/actualRatio : actualRatio/targetRatio; 
    video.css('-webkit-transform','scale(' + scale + ')'); 
};

aussi longtemps que la <video> a une largeur et une hauteur réglée sur 100% et votre div conteneur a overflow:hidden juste passer css il la balise vidéo.

var vid = document.getElementsByTagName("video")[0]; 
fillVideo(vid);

Source

2015-03-26 09:51:10 Mulhoon

L'option CSS correct pour cela est object-fit: contain;

L'exemple suivant va étirer une image d'arrière-plan sur toute la largeur de l'écran (en rompant le rapport d'aspect), et le maintien d'une hauteur fixe constante.

body { 
    background-image:url(/path/to/background.png) 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: 100% 346px; 
    object-fit: contain; 
}

Pour une vidéo dans le contexte de l'OP il serait alors:

video#vidtest { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

Source

2015-07-15 17:37:21 user2121874

Cela ne fonctionne pas pour les vidéos utilisant Android 4.4.4 WebView (application Cordova). –

Après quelques difficultés, ceci est ce que j'ai fini avec. Il mettra automatiquement à l'échelle la vidéo au bon moment.

var videoTag = $('video').get(0); 
videoTag.addEventListener("loadedmetadata", function(event) { 
    videoRatio = videoTag.videoWidth/videoTag.videoHeight; 
    targetRatio = $(videoTag).width()/$(videoTag).height(); 
    if (videoRatio < targetRatio) { 
     $(videoTag).css("transform", "scaleX(" + (targetRatio/videoRatio) + ")"); 
    } else if (targetRatio < videoRatio) { 
     $(videoTag).css("transform", "scaleY(" + (videoRatio/targetRatio) + ")"); 
    } else { 
     $(videoTag).css("transform", ""); 
    } 
});

Mettez simplement ce code dans un bloc $(document).ready().

Testé sur Chrome 53, Firefox 49, Safari 9, IE 11 (IE met à l'échelle la vidéo correctement, mais pourrait faire d'autres choses amusantes autour si).

Source

2016-10-14 22:40:42 jox

Ce qui a fonctionné pour moi est

video { 
object-fit: fill; 
}

Source

2016-12-03 17:53:10 JAck

Merci. Cela a effectivement brisé le rapport d'aspect, ce que OP a demandé. –

échelle HTML5 Vidéo et fractionner le format pour remplir le site entier

Répondre

Questions connexes