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

【问题标题】：Set fullscreen to vimeo player using Blazor hosted使用托管的 Blazor 将全屏设置为 vimeo 播放器
【发布时间】：2020-11-21 02:11:01
【问题描述】：

我已成功在我的 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 创建的。非常感谢任何帮助。

【问题讨论】：

我也有同样的问题
请提供您的代码？你如何设置 @videoSrc ？之后你会打电话给 StateHasChanged 吗？

标签： blazor blazor-client-side blazor-webassembly vimeo-player

【解决方案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>

【讨论】：