Pourquoi plyr ne lit pas la vidéo en mode plein écran dans n'importe quel navigateur ?

Question

J'ai rencontré un problème tout à fait différent, en fullscreen mode mon plyrjs ne lit pas de vidéo à fullscreen

J'ai essayé de reproduire le problème avec le même code dans codepen mais il fonctionne en codepen pourquoi ?

Question : pourquoi le même code produit fullscreen en codepen mais pas dans mon projet, ni dans aucun navigateur.

Voici une capture d'écran (jouée en fullscreen dans mon projet) :

**

var videoPlayer = new Plyr('#plyr-video');

var src  = 'https://vjs.zencdn.net/v/oceans.mp4';

     videoPlayer.source = {
            type: 'video',
            title: 'Example title',
            sources: [
             {
                  src: src,
                  type: 'video/mp4',
                  size: 720
              }
            ],
            poster: ''
          };

<link href="https://cdn.plyr.io/3.4.7/plyr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
   <video controls crossorigin playsinline id="plyr-video" controlsList="download" controls style="max-width: 533px;max-height: 300px;">
                    <source src="" type="video/mp4">
                    <source src="" type="video/webm">
                    <track kind="captions" label="English captions" src="" srclang="en" default>
                  </video>

Démonstration de Codepen : https://codepen.io/eabangalore/pen/wRdGGB

Answer 1

Assurez-vous que votre <link y <script Les déclarations d'importation sont déclarées au début de votre code.

<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css" />
<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script >