web-dev-qa-db-fra.com

redimensionnez la vidéo HTML5 et modifiez le rapport hauteur/largeur pour remplir le site

Je souhaite utiliser une vidéo 4: 3 comme arrière-plan sur un site, mais le réglage de la largeur et de la hauteur sur 100% Ne fonctionne pas, car les proportions sont conservées telles quelles, la vidéo ne remplit donc pas toute la largeur du site. .

merci de votre aide!

voici 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;
}
csshtml5html5-video
17
Roland

je sais que ce fil est très ancien et ce que je propose n'est pas nécessairement la solution que vous recherchez, mais pour toutes les personnes qui atterrissent ici à cause de la recherche que j'ai effectuée: redimensionne la vidéo pour remplir l'élément de conteneur vidéo , en conservant le ratio intact 

Si vous souhaitez que la vidéo remplisse la taille de l'élément <video> mais que la vidéo soit correctement dimensionnée pour remplir le conteneur tout en conservant le rapport de format, vous pouvez le faire avec CSS à l'aide de 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 pourra aider certaines personnes.

EDIT: fonctionne dans la plupart des navigateurs, mais IE

45
Mathias


vous pouvez utiliser:

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

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

14
Ouadie

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

[...] de la même manière que l'élément img - si vous ne définissez qu'une largeur et une hauteur, l'autre dimension est automatiquement ajustée de manière à ce que la vidéo conserve ses proportions. Cependant, contrairement à l'élément img, si vous définissez la largeur et la hauteur sur quelque chose qui ne correspond pas au rapport d'aspect de la vidéo, celle-ci n'est pas étirée pour remplir la zone. Au lieu de cela, la vidéo conserve le format d'image correct et est encadrée par une boîte aux lettres à 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 les proportions.

9
drudge

Je travaille autour de cela en javascript en comparant le rapport défini sur l'élément à la vidéo source, puis en appliquant une transformation CSS: https://Gist.github.com/1219207

7
Jim Jeffers

J'ai ramassé ça hier et je me suis battu pour avoir une réponse. Ceci est un peu similaire à la suggestion de Jim Jeffers, mais cela fonctionne pour les échelles x et y, est en syntaxe javascript et ne repose que sur jQuery. Cela semble bien fonctionner:

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 rencontrerez 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 de mon projet actuel. À cause de cela, j'utilise une div wrapper dans l'exemple et redimensionne la vidéo à 100% à l'intérieur du wrapper pour éviter les problèmes dans certains cas rencontrés.

6
Shane

Ce qui a fonctionné pour moi, c'est 

video {
object-fit: fill;
}
3
JAck

J'utilise ceci pour remplir la largeur OR de hauteur ... (nécessite jQuery) Ceci maintient le rapport de format et remplit le div. Je sais que la question était de casser l'aspect rationnel, 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  + ')');
};

tant que la largeur et la hauteur du <video> sont définies sur 100% et que votre conteneur div a le css overflow:hidden, transmettez-lui simplement la balise video.

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

Après quelques difficultés, voici ce avec quoi je me suis retrouvé. La vidéo sera automatiquement mise à l'échelle 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", "");
    }
});

Il suffit de mettre ce code dans un bloc $(document).ready().

Testé sur Chrome 53, Firefox 49, Safari 9, IE 11 (IE redimensionne correctement la vidéo, mais peut faire d’autres choses amusantes autour de celle-ci).

0
jox

L'option CSS appropriée pour cela est object-fit: contain;

L'exemple suivant étend une image d'arrière-plan sur la largeur de l'écran (en respectant le rapport de format) et en maintenant 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 du PO, ce serait alors:

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