为什么 plyr 没有在任何浏览器中以全屏模式全屏播放视频

Question

我遇到了一个非常不同的问题，在fullscreen 模式下，我的plyrjs 没有向fullscreen 播放视频

我试图在 codepen 中使用相同的代码重现 问题，但它在 codepen 中有效，为什么？

问题：为什么相同的代码在 codepen 中生成 fullscreen，但在我的项目中，在任何浏览器中都没有。

这是屏幕截图（在我的项目中以fullscreen 模式播放）：

**

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>

Codepen 演示：https://codepen.io/eabangalore/pen/wRdGGB

Answer 1

确保您的 <link 和 <script 导入语句在您的代码中尽早声明。

<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 >