2
votes

Comment adapter un lecteur vidéo à son contenu?

Je crée une application Web dans laquelle une vidéo d'arrière-plan est la fonctionnalité principale. J'ai réussi à faire en sorte que la vidéo s'adapte à tout l'écran en obtenant des barres noires sur les côtés pour éviter le rapport hauteur / largeur (j'ai besoin que toute la vidéo soit affichée, je ne veux pas que des parties soient coupées).

Ceci est ce qui se passe lorsque la largeur n'est pas suffisante

Voici ce qui se passe lorsque la hauteur n'est pas suffisante

C'est ce que je veux en fait, il n'y a qu'un seul problème. Le message que vous pouvez voir sur les deux images provient du plugin videojs-overlay qui aligne les messages où vous le souhaitez, dans ce cas, en haut. Et pour aligner ces messages, cela prend toute la fenêtre d'affichage, mais pas l'emplacement de lecture de la vidéo.

Je veux que cela se produise

Voici mon code actuel:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
    <script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
    <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
    <title>Videojs Dailymotion</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .videoContainer
    {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
    }
    .videoContainer video
    {
    min-width: 100%;
    min-height: 100%;
    }
    .video-js .vjs-control-bar,
    .video-js .vjs-big-play-button,
    .video-js .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(43, 51, 63, 0);
    }
    </style>
  </head>
  <body>
    <video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
      <source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">

    </video>
    <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
    <script>
    var player = videojs('vid1',{
    controls: true,
    posterImage: false,
    textTrackDisplay: false,
    loadingSpinner: false,
    controlBar: {
    fullscreenToggle: false,
    progressControl: false,
    remainingTimeDisplay: false
    }
    });
    player.overlay({
    content: '<strong>Default overlay content</strong>',
    overlays: [{
      align: "top",
      content: 'This event-triggered overlay message appears when the video is playing',
      start: 'play',
      end: 'pause'
    }]});
    </script>
  </body>
</html>

J'ai essayé des ajustements d'objet, un aspectRatio fluide et rien ne semble fonctionner Une autre image pour expliquer ce que je veux faire:

Je veux que le carré bleu soit le carré rouge tout en maintenant le rapport hauteur / largeur

html css video.js video overlay

0 commentaires

3 Réponses :

1
votes

Vous pouvez essayer celui-ci.

object-fit: cover;

Ou peut-être même celui-ci sur l'élément vidéo:

.video-js.videoContainer video {
   display: block;
   min-height: 100%;
   min-width: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   width: auto;
   height: auto;
}

0 commentaires

0
votes

Si vous n'êtes pas concerné par les proportions, alors object-fit: fill;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
    <script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
    <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
    <title>Videojs Dailymotion</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .videoContainer
    {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
padding-top: 50%;
    }
    .videoContainer video
    {
    min-width: 100%;
    min-height: 100%;
    object-fit: fill; /*Added property*/
    }
    .video-js .vjs-control-bar,
    .video-js .vjs-big-play-button,
    .video-js .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(43, 51, 63, 0);
    }
    </style>
  </head>
  <body>
    <video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
      <source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">

    </video>
    <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
    <script>
    var player = videojs('vid1',{
    controls: true,
    posterImage: false,
    textTrackDisplay: false,
    loadingSpinner: false,
    controlBar: {
    fullscreenToggle: false,
    progressControl: false,
    remainingTimeDisplay: false
    }
    });
    player.overlay({
    content: '<strong>Default overlay content</strong>',
    overlays: [{
      align: "top",
      content: 'This event-triggered overlay message appears when the video is playing',
      start: 'play',
      end: 'pause'
    }]});
    </script>
  </body>
</html>

5 commentaires

Ce serait parfait s'il ne coupait pas une partie de la vidéo. Merci quand même!

Mise à jour de la réponse. Si cela ne vous dérange pas de changer le rapport hauteur / largeur, vous pouvez essayer object-fit: fill;

Bien sûr, c'est mieux que rien, si rien d'autre n'apparaît, c'est la voie à suivre. Merci!

Heureux que cela puisse vous être utile =)

ajustement de l'objet: couverture; à mon avis convient mieux dans ce cas. Parce que la vidéo ne sera pas étirée, brisant son apparence.

0
votes

J'ai un peu obtenu ce que je voulais à la fin.

.container {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.wrapper {
width: 100%;
max-width: calc(100vh / 0.5625);
padding-bottom: (9 / 16) * 100%;
top: 50%;
left: 50%;
background-color: deepskyblue;
}

<video id="vid1" class="video-js vjs-default-skin" style="width:100%;height:auto; position: relative;" controls>
      <source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
    </video>

Avec cela, j'ai pu conserver le rapport hauteur / largeur de la vidéo tout en gardant le lecteur sur le contenu vidéo. Le seul problème est que la vidéo n'est pas centrée sur l'écran. MERCI à tous pour l'aide!

0 commentaires