在 Blazor 中显示模态视频答案

【问题标题】：Display a Modal Video in Blazor在 Blazor 中显示模态视频
【发布时间】：2020-05-27 23:57:22
【问题描述】：

我正在尝试使用此模板创建一个模式窗口，用于在 Blazor 中查看视频 - https://codepen.io/JacobLett/pen/xqpEYE

我已将函数放在 jsfunctions.js 文件中，并且我有一个对它的引用 - <script src="jsfunctions.js"></script> 在 index.html 的 Head 标记内

function ModalShow() {
  $(document).ready(function() {
    // Gets the video src from the data-src on each button
    var $videoSrc;
    $('.video-btn').click(function() {
      $videoSrc = $(this).data("src");
    });
    console.log($videoSrc);

    // when the modal is opened autoplay it  
    $('#myModal').on('shown.bs.modal', function(e) {
      // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
      $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
    })

    // stop playing the youtube video when I close the modal
    $('#myModal').on('hide.bs.modal', function(e) {
      // a poor man's stop video
      $("#video").attr('src', $videoSrc);
    })

    // document ready
  });
}

但是，我不知道如何初始化 javascript 函数。我尝试在 blazor 组件中使用以下方法

protected override async Task OnInitializedAsync()
{
  await JSRuntime.InvokeAsync<object>("ModalShow").AsTask();
}

但是，我收到此错误：

Unhandled exception rendering component: $ is not defined
    ReferenceError: $ is not defined
        at ModalShow (https://localhost:5001/jsfunctions.js:10:5

我是 Blazor 的新手，对 JavaScript 一无所知。是否有显示模态视频的纯 Blazor 方式？

谢谢。

后期编辑：按钮的 HTML 代码：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/Jfrjeg26Cwk" data-target="#myModal">
  Play Video 1 - autoplay
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <!-- 16:9 aspect ratio -->
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

body {
  margin: 2rem;
}

.modal-dialog {
  max-width: 800px;
  margin: 30px auto;
}

.modal-body {
  position: relative;
  padding: 0px;
}

.close {
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  opacity: 1;
}

【问题讨论】：

标签： javascript blazor

【解决方案1】：

这样：

window.modalVideo = {
   init: () => {
        // Gets the video src from the data-src on each button
        var $videoSrc;
        $('.video-btn').click(function() {
          $videoSrc = $(this).data("src");
        });
        console.log($videoSrc);

        // when the modal is opened autoplay it  
        $('#myModal').on('shown.bs.modal', function(e) {
          // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
          $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
        });

        // stop playing the youtube video when I close the modal
        $('#myModal').on('hide.bs.modal', function(e) {
          // a poor man's stop video
          $("#video").attr('src', $videoSrc);
        });
   }
};

和

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    await JSRuntime.InvokeVoidAsync("modalVideo.init");
  }
}

您还需要在 intdex.html 中加载 JQuery：$ 是 JQuery

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Bootstrap js 打开引导模式

<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

还有波普尔，因为bootstrap js depends on Popper.js

<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

【讨论】：