Je tente d'afficher une vidéo dans une conception réactive telle que les bordures de mise à l'échelle se fondent sur l'arrière-plan.
i permettant aux dimensions de l'élément vidéo varient dans les limites spécifiées. En conséquence, lorsque la lecture vidéo ne remplit pas l'élément HTML réel, je reçois les barres de rembourrage noir autour de ma vidéo.
Utilisation de la propriété de fond CSS J'ai pu changer la couleur des barres montré à Chrome, Firefox et Opera. Je ne peux pas comprendre comment changer la couleur affichée pour Internet Explorer ou iOS (iPad).
Quelqu'un peut-il m'aider avec cela?
Fiddle à la demande: *** _ modifier _ * ** est un meilleur violon: http://jsfiddle.net/swae/40/ La lecture vidéo devrait rester verticalement et horizontalement centré dans le conteneur. Je veux que les "barres" soient transparentes ou de la même couleur que le conteneur (rouge dans ce cas ...).
6 Réponses :
Que diriez-vous de div avec CSS comme arrière-plan? [Je ne connais pas avec iOS, goûté sur IE11]
html: CSS: < / p> jsfiddle: http: / /jsfiddle.net/c9ahf/1/
J'ai besoin de la vidéo pour maintenir un rapport de format lors du dimensionnement arbitrairement sans barres noires. Cela affiche toujours des barres noires lorsque la lecture vidéo ne correspond pas aux dimensions de l'objet vidéo dans IE: Jsfiddle.net/qhw2g
Qu'essayez-vous de faire? Vous voulez mettre des vidéos avec différentes tailles dans une zone de taille fixe?
J'ai un div cela avec des dimensions pourcentage (comme la largeur = 30%, hauteur = 100%). L'élément vidéo est alors à 100% de largeur et à 100% de hauteur à l'intérieur du conteneur. Le format de lecture est peu susceptible de correspondre aux dimensions du bloc. IE et iOS montrent des "barres noires" lorsqu'il maintient la lecture au rapport de format correct au lieu de se fondre dans l'arrière-plan
Voici un violon: http://jsfiddle.net/swaee/13/
Ce violon montre les barres noires toujours sur IE: jsfiddle.net/x24m4 Mes dimensions vidéo sont définies avec un pourcentage rembourrage pour la réactivité. Ils sont autorisés à changer dans les limites. Je ne veux pas déformer le rapport de l'aspect en définissant une largeur ou une hauteur dure non plus. J'essaie de me débarrasser des barres noires qu'ils causent.
Je ne suis pas sûr, ce que vous voulez démontrer ici. Vous utilisez toujours la hauteur = "240" si vous voulez le rendre réactif utilise simplement hauteur = "auto".
Fiddle mis à jour. Les dimensions du conteneur sont définies par la fenêtre. J'ai démontré les deux cas (à l'exclusion du cas trivial où les dimensions du conteneur sont égales sur les dimensions vidéo). La lecture vidéo doit rester centrée car elle se trouve dans une position: superposition fixe qui fait défiler avec l'écran
résolu! Lien vers The Live Jsbin: http://jsbin.com/avozoxu/9
Modifier JSBIN à suivre l'explication: http://jsbin.com/avozoxu/9/edit de
Je ne pouvais pas le tester sur c'est-à-dire, mais cela devrait fonctionner comme un charme.
Il y a un vrai problème avec iOS. Vous ne serez pas en mesure de définir une couleur d'arrière-plan sur le lecteur et la taille du lecteur par défaut est 150x300 comme vous pouvez le voir dans Bibliothèque de développeurs Safari : P>
car Les dimensions natives d'une vidéo ne sont pas connues avant le film Charges de métadonnées b>, une hauteur et une largeur par défaut de 150 x 300 b> sont attribuées sur les périphériques exécutant iOS si la hauteur ou la largeur n'est pas spécifiée. Actuellement, la hauteur et la largeur par défaut ne changent pas lorsque le film Charges, [...] P> blockQuote>
Donc, ce que vous devez faire pour supprimer les barres noires est modifier B> la taille par défaut et l'adaptez-la à la taille du film dès que possible. Et oui, nous aurons besoin de JavaScript. P>
xxx pré> et vous obtiendrez maintenant une taille de lecteur vidéo de la vidéo dès que les métadonnées se chargent. Étant donné que la vidéo n'a plus ses barres noires, je devais juste le centrer sous forme de texte. P>
Oh! Et vous vouliez que ce soit réactif? Vérifiez-le, peu importe la largeur que vous avez définie sur le
#content code> carNaturalsize () code> vérifie le rapport et la largeur du conteneur et définit une hauteur inférieure pour la vidéo. que l'original, empêchant les barres noires apparaissant dans une hauteur vidéo d'origine avec une largeur plus petite. p>La largeur est contrôlée avec le
max-largeur: 100%; code> Pour le changer manuellement. P>#content{ background:blue; width:50%; height:auto; text-align:center; } video { max-width:100%; vertical-align:top; }
Tout ce que vous faites avec beaucoup de code JS est automatiquement effectué avec la hauteur: Auto. Pour obtenir la bonne taille avant que l'événement métadatataloaded est facile aussi. Utilisez simplement une affiche avec le même rapport d'aspect de votre vidéo.
Mais la question est de savoir comment supprimer les barres noires quel que soit le rapport (donc, l'affiche ne serait pas une solution), je suppose que cela peut varier d'une vidéo à l'autre. Et comme Safari Mobile définit une largeur et une hauteur par défaut à la balise vidéo, hauteur: auto; ne fonctionnera pas non plus.
Résolu sans JS:
<div style="display: table-cell; vertical-align: middle; width:200px; height:600px; background-color:red;">
<video width="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
<video height="100%" style="background-color:red; display: block; width: auto; margin: 0 auto;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
Barres noires dans la vidéo horizontale. Il obtient toujours la largeur par défaut de 300PX. Testé sur iOS7 Safari, iPad 3G.
Hein. Cela a fonctionné sur l'iPad que j'ai ici. Certes, c'est un iPad de première génération ... Oh bien.
Les dimensions du conteneur étaient un exemple de deux états. Les dimensions réelles sont déterminées par les dimensions de la fenêtre avec CSS en pourcentage. Donc, deux solutions différentes ne fonctionneront pas = (puisqu'elle n'est pas prévisible quel état la vidéo s'affichera.
Je pense que j'ai réussi à trouver une solution:
Le problème est qu'il semble impossible de styler ces boîtes de caractères. Donc, l'astuce ne serait alors pas d'avoir des boîtes aux lettres, en éteignant l'élément vidéo sur le rapport de format du fichier vidéo.
Cette solution comporte deux inconvénients potentiels:
Vous devez connaître les dimensions du fichier vidéo et les écrire dans La raison en est que le navigateur ne connaît pas les dimensions du fichier vidéo avant d'avoir commencé à le charger. La plupart des navigateurs chargent quelques octets de la vidéo avant qu'il ne soit joué, mais pas tous - des versions anciennes d'Android Attendez que l'utilisateur commence à lire la vidéo . Si vous ne vous souciez pas de Android 2.3, en attente du Jetez un coup d'oeil À ce sujet: Exécuter Fiddle / Editeur de violon Nous faisons essentiellement trois choses: Vous pouvez maintenant simplement définir la couleur de fond du conteneur et vous avez terminé. Je l'ai testé avec iOS 7 sur iPhone et iPad, Chrome, Firefox et Safari. Pas de test à ce jour, puisque je n'ai actuellement pas mes machines virtuelles à portée de main, mais je prévois aucun problème ici pour le courant actuel. DATA -Attributes
Loadedmetadata Événement pour obtenir Videowidth and VideoHeight comme JAICABS Réponse Le fait-il est la bonne façon.
Cette solution est jusqu'à travailler un an et demi plus tard. THX.
Je sais que le temps a déjà été passé depuis la question, mais j'ai également dû mettre en œuvre une solution de contournement pour ce problème et souhaitez partager. Le problème était similaire à l'OP, en ce que la vidéo pourrait être une taille ou un rapport d'aspect.
si le code HTML Connaissant cela, nous pouvons tirer parti du Voici un violon testé dans IE11: p> http://jsfiddle.net/j6lnz31y/ p> Source (au cas où le violon ne devient jamais indisponible): P> code> code> Ce qui spécifie du tout une taille, le conteneur s'adaptera automatiquement autour de la vidéo et il n'aura pas de "rembourrage" noir. P> Loadedmetadata Code> Événement: Nous n'avons pas besoin de dimensions de la vidéo pour tout calcul, mais nous devons attendre que ces données se chargent afin que le conteneur redimensionnait. Dès que cela se produit, nous pouvons régler la position du conteneur horizontalement et / ou verticalement. P> /*
* After the video dimentions have been acquired, its container will have
* resized and we can adjust its position as necessary.
*/
function adjustVideoContainer() {
console.log("video metadata loaded");
var videoContainer = $(this).parent().filter(".video-container");
if (videoContainer.length === 0) {
//abort
console.log(
"adjustVideoContainer() was called but no it wasn't "+
"wrapped in an appropriate container"
);
return;
}
var containerParent = videoContainer.parent();
var parentWidth = containerParent.width(),
parentHeight = containerParent.height(),
containerWidth = videoContainer.width(),
containerHeight = videoContainer.height();
if (containerWidth < parentWidth) {
videoContainer.css(
"left",
(parentWidth - containerWidth) / 2
);
}
if (containerHeight < parentHeight) {
videoContainer.css(
"top",
(parentHeight - containerHeight) / 2
);
}
else {
videoContainer.height("100%");
}
videoContainer.css("opacity", 1);
}
$("video").on("loadedmetadata", adjustVideoContainer);
Pouvez-vous nous donner un exemple ou un violon?
@Bramvanroy Voir la mise à jour du violon. Affiche des barres bleues autour de la vidéo en chrome / ff mais pas à savoir. J'ai besoin de montrer le bleu dans IE aussi.
Avez-vous envisagé ou est-ce une option, d'utiliser HTML5 Canvas pour rendre la vidéo au lieu d'utiliser uniquement l'élément vidéo?
@Wayne: J'ai vu cela auparavant, mais la performance ne semble jamais être très bonne.
Je sais que iOS prend en charge HTML5, mais c'est-à-dire peut utiliser un autre plugin et peut-être que ce plugin ne prend pas en charge HTML5