为什么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>

{{1}}

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 >