Question

我有视频列表，我希望仅在单击缩略图时才能播放视频。

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>

Answer 1

    <div id="divVideo">
<video id="MyVideo" style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
    <source src="video/sample.mp4" type="video/mp4">
    </video>
</div>

然后编写一个JavaScript函数以加载不同的视频

function changeVideo(source){
  var $video=$("#MyVideo")[0];
  $("#MyVideo source").attr('src', source);
  $video.load();
  $video.play();
}

假设您有3个缩略图，

<img class="thumbnail" data-url="source1" src="img1"/>
<img class="thumbnail" data-url="source2" src="img2"/>
<img class="thumbnail" data-url="source3" src="img3"/>

在准备好的文档中，写功能

$(".thumbnail").click(function(){
changeVideo($(this).attr("data-url"));
});

在模式弹出窗口中显示的FOr仅使用引导程序模式弹出窗口 https://www.w3schools.com/bootstrap/bootstrap_modal.asp

将视频加载到弹出窗口中

$(".modal-body").html($("#divVideo").html());

在此之后，编写命令以显示弹出窗口

$("#MyModal").show()

我有一些视频列表，我只想在弹出模式下播放一个视频

1 个答案: