Question

我正在寻找一种方法，可以在模式弹出窗口中动态显示视频，而无需将其嵌入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，但可能是加载时间问题。

有人可以帮我吗？

Answer 1

问题在于您正在源元素上设置src。将其直接设置在视频元素上。如果将其修改为$(theModal + ' video').attr('src', videoSRCauto);，则它会像您期望的那样工作。另外，您可能想要创建已设置src的source元素。

Answer 2

一切看起来不错，您只是想念$(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 个答案: