以模态显示视频答案

【问题标题】：Display video in modal以模态显示视频
【发布时间】：2019-02-01 14:37:14
【问题描述】：

我正在寻找一种在模式弹出窗口中动态显示视频而不嵌入到 YouTube 中的方法。

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
    $(theModal + ' source').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' source').attr('src', videoSRC);
    });
  });
});

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4" data-toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <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>
          <video controls>
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

YouTube Iframe - 在 iframe 中嵌入 youtube 视频的工作示例

Regular video - 在这里我尝试使用 html 视频。视频得到了正确的src，但它可能是加载时间的问题。

谁能帮帮我？

【问题讨论】：

为什么不用 html “video” 组件来代替 iframe 呢？
@LéoR。看第二个小提琴 - jsfiddle.net/xb3v9c4u
不是已经有一个可行的例子了吗？
试过让它与 html5 视频一起工作，但不能，否则我不会发这篇文章.. 它几乎可以工作，以嵌入的 YouTube iframe 为例

标签： javascript jquery html html5-video bootstrap-modal

【解决方案1】：

一切看起来都不错，只是缺少$(theModal + ' video').load();。如果要设置 src 运行时，则必须加载外部视频。

请看下面的片段：

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
    $(theModal + ' source').attr('src', videoSRCauto);
    $(theModal + ' video').load();
    $(theModal + ' button.close').click(function () {
      $(theModal + ' source').attr('src', videoSRC);
    });
  });
});

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4" data-toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <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>
          <video controls width="100%">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

你可以测试一下here

【讨论】：

【解决方案2】：

问题是您在源元素上设置了 src。直接在视频元素上设置。如果您将其修改为$(theModal + ' video').attr('src', videoSRCauto);，那么它会像您期望的那样工作。或者，您可能希望创建已设置 src 的源元素。

【讨论】：

直接在video元素上设置有什么后果吗？
不。源标签主要是为了支持不同格式的不同视频的用例。