使用Blazor主机将全屏设置为vimeo播放器

Question

我已经成功地在我的Blazor应用程序中嵌入了一个vimeo播放器。现在我的客户端请求显示全屏控件。根据文件，它应该是这样的：

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

事实上，如果我这样说，它肯定会显示出完全的控制。问题是我需要视频src是动态的，因此，我的代码是这样的：

<iframe src="@videoSrc" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

然后，全屏控件将不再显示。试图深入研究这个问题，检查创建的html，不同的是在后者中，播放器是用no-fullscreen-support创建的。如果有任何帮助，我将不胜感激。

Answer 1

所以，这就是我解决问题的方法。根据这里的文档，我使用的播放器是这样的：

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('play', function() {
console.log('played the video!');
});
player.getVideoTitle().then(function(title) {
console.log('title:', title);
});
</script>

但由于某种原因，Blazor似乎以这样一种方式包装iFrame，使Vimeo播放器无法实现全屏。

根据这里的文档，我改成了这个。在这种情况下，options.id是videoSrc/videoUrl

<div id="made-in-ny"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var options = {
id: 59777392,
width: 640,
loop: true
};
var player = new Vimeo.Player('made-in-ny', options);
player.setVolume(0);
player.on('play', function() {
console.log('played the video!');
});
</script>