我正在寻找一种在模态弹出窗口中动态显示视频的方法，而无需嵌入到 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">×</span></button>
<video controls>
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>YouTube Iframe - 在 iframe 中嵌入 YouTube 视频的工作示例
Regular video
- 在这里我尝试使用 html 视频代替。视频获得了正确的 src，但加载时间可能存在问题。
谁能帮帮我吗？
最佳答案
一切看起来都不错，只是缺少 $(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">×</span></button>
<video controls width="100%">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>你可以测试一下here
关于javascript - 以模态显示视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54481655/