0
votes

comment éviter les changements de hauteur de la vidéo tout en modifiant ses attributs

cliquez sur un bouton pour modifier l' poster vidéo et les attributs src
après le clic, la hauteur de la vidéo devient 0 - une courte période - mais suffisamment pour produire un effet laid sur toute la page
comment éviter cela?
note - lorem.mp4 et ipsum.mp4 ont la même résolution et les mêmes dimensions

var player = $('#player');
$('button').on('click', function(){
    player.attr('poster', 'ipsum.jpg');
    player.attr('src', 'ipsum.mp4');
    player[0].play();
});

<video class='vtop' id='player' controls poster='lorem.jpg'>
<source src='lorem.mp4' type='video/mp4'>
</video>

javascript jquery html video

0 commentaires

3 Réponses :

0
votes

J'ai essayé votre code et j'y ai ajouté un fichier css et j'ai donné à la vidéo une hauteur fixe:

video {
  height: 400px;
}

Je pense que c'est suffisant et je ne vois aucun effet spécial lorsque je clique sur le bouton.

1 commentaires

et la vidéo ne répond pas dans ce cas

0
votes

La hauteur est modifiée car la hauteur de votre lecteur vidéo dépend de la hauteur de la vidéo. Et lorsque vous changez la hauteur du lecteur vidéo src , la hauteur change également. Ce que vous devez faire, c'est simplement spécifier la height de votre balise video .

2 commentaires

non, la nouvelle vidéo est de la même hauteur. De plus, la hauteur fixe ne répond pas

Vous pouvez alors spécifier la hauteur min. Donc pour le moment où une vidéo est chargée, le lecteur aura une valeur min-height. si vous voulez vraiment que le joueur conserve l'ancienne hauteur, sur votre gestionnaire de clics, vous pouvez mesurer la hauteur actuelle avant le changement de src, l'appliquer, puis la supprimer lors de l'événement loadeddata

0
votes

$('button').on('click', function(){
    let x = player.height();
    player.height(x);    

});
strange logic but it works

0 commentaires