web-dev-qa-db-fra.com

Bouton de lecture centré VideoJS

Je pensais partager un code qui pourrait être utile à quelqu'un. C’est une fonction qui est centrée sur le bouton de lecture du lecteur vidéo-js, cela fonctionne pour moi. Il vous suffit de l'appeler lors de la pause et lorsque le lecteur est initialisé et qu'il n'est pas en lecture automatique.

Prendre plaisir!

function CenterPlayBT() {
   var playBT = $(".vjs-big-play-button");
   playBT.css({
      left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
      top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
   });
}
videovideo-streaminghtml5-video
22
user1592579

Vous pouvez essayer de jouer sur videojs.com ou comme @misterben l’a dit plus haut: "ajoutez simplement la classe vjs-big-play-centrée à l’élément video" 

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

Aire de jeux: https://codepen.io/heff/pen/EarCt

Pour la version SCSS, vous pouvez utiliser 

$center-big-play-button: true;
51
Adrian P.

Créez un emplacement video-js-custom.css après:

<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">

Ajout de video-js-custom.css:

.video-js .vjs-big-play-button {
    left: 40% !important;
    top: 40% !important;
    width: 20%;
    height: 20%;
}

.video-js .vjs-play-control:before {
    top:20% !important;
    content: '\f101';
    font-size: 48px;
}
1
Dung Vu

Moyen facile:

http://designer.videojs.com - au bas du moins, ajoutez simplement:

.vjs-default-skin .vjs-big-play-button {
  margin-left: -@big-play-width/2;
  margin-top: -@big-play-height/2;
  left: 50%;
  top: 50%;
}
0
Chris Beck

Ajouter un CSS personnalisé à votre code

.vjs-big-play-button {
    margin-top: 20%;
    margin-left: 40%;
    width: 70px !important;
    height: 70px !important;
}

Ajustez la largeur et la hauteur en conséquence.

0
Kapil

J'utilise "limelight player" qui utilise video.js pour fournir la solution HTML5, mais j'ai un problème pour centrer l'icône du bouton de lecture dans les appareils iOS. Problème signalé et le soutien ne pouvait pas venir avec la solution. Ils ont confirmé le problème. J'ai pensé partager ma solution qui pourrait aider quelqu'un. La solution était simple: réduire la taille de la police! Outre la "taille de la police", il existe une propriété héritée "hauteur de ligne" qui pourrait également nécessiter des ajustements. Ces deux propriétés augmentent le conteneur parent et un défaut d'alignement survient si le conteneur parent n'est pas défini sur relatif ou si le conteneur du lecteur vidéo est défini sur réactif (largeur: 100%; hauteur: 100%) 

La solution CSS qui m'a aidé était donc: 

.video-js .vjs-limelight-big-play{ 
      font-size:100px!important /*or less */
}

Ou encore mieux passer de PX à EM, ce qui aidera les appareils mobiles (problème rencontré par iOS avec le centrage d'un bouton de lecture aussi) 

.video-js .vjs-limelight-big-play{ 
      font-size:10em!important /*or less depending on your design*/
}
0
StefaDesign