Блог

Главная - Вопросы по программированию - Установите полноэкранный режим для vimeo player с помощью Blazor hosted

Установите полноэкранный режим для vimeo player с помощью Blazor hosted

#blazor #blazor-client-side #blazor-webassembly #vimeo-player

#blazor #blazor-на стороне клиента #blazor-webassembly #vimeo-player

Вопрос:

Я успешно внедрил vimeo player в свое приложение Blazor. Теперь мой клиент запросил отобразить полноэкранный элемент управления. Согласно документации, это должно выглядеть так:

 <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 помощью .
Я был бы очень признателен за любую помощь.

Комментарии:

1. У меня такая же проблема

2. пожалуйста, предоставьте свой код? как вы устанавливаете @videoSrc? Вызываете ли вы StateHasChanged впоследствии?

Ответ №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 player не может перейти в полноэкранный режим.

Я перешел на это, согласно документам здесь. В этом случае 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>