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

确实，如果我这样说，它肯定会显示全屏控件。问题是我需要视频源是动态的，因此，我的代码是这样的：

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

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

Answer 1

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

<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 似乎以一种使 Vimeo 播放器无法全屏显示的方式包装 iFrame。

根据文档 here，我更改为这个。在这种情况下，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>

使用 Blazor 托管将全屏设置为 vimeo 播放器

Set fullscreen to vimeo player using Blazor hosted

blazor

blazor-client-side

blazor-webassembly

vimeo-player