javascript - 如何从 div 内的视频元素获取源并将其传递给另一个视频元素 - javascript

Question

我是 JavaScript 的新手，我开始了一个包含视频播放器和编辑器的新项目。

我有这个模态框:

<div class="modal" id="myModal">
  <div class="modal-header">
     </div>
     <div class="modal-body">
        <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
     </div>
     <div class="modal-footer">
  </div>
</div>

我有这样的视频预览:

<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" class="image" alt="">
    <div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" alt="" class="image" />
    <div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>

我需要的是:当用户点击 <div class="video">在文章中，我必须获取其中视频元素的源并将其传递给模态框内视频元素的源。

为此，我尝试在 JavaScript 中执行此操作:

<script>
function Video()
{
    var Source = $("#video1 source").attr("src");
    $('#ModalVideo video source').attr('src', Source);
    $("#ModalVideo video")[0].load();
}
</script>

它有效，但仅适用于 ID 为“video1”的视频元素，我需要它适用于每个视频元素。有没有一种方法可以在用户单击 div 时获取视频源，而不必为每个视频元素分配一个 id 并使用“onClick”？

感谢您的帮助，如果您有任何问题或建议，请与我联系。

Answer 1

<div id="myModal" class="modal">
    <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

如果你有一个基本的模式，你可以改变视频的来源并开始播放..但首先，不要在同一页面的不同标签中使用相同的 id。第二;使用“this”作为参数，是捕获点击的 div 或其他标签的更简单方法...

<article :hover class="thumb" onclick="Video(this)">
  <img src="images/thumbs/eminem.jpg" class="image" alt="" data-video-src="images/movie.mp4.mp4" data-autoplay=1 data-muted=1 />
</article>
<article :hover class="thumb" onclick="Video(this)">
  <img src="images/thumbs/eminem.jpg" alt="" class="image" data-video-src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" data-autoplay=1 data-muted=1 />
</article>

当你使用“this”作为参数时，不需要任何 id 来查找哪个 div 被点击了。

<script>
   function Video(t){
        var src = $(t).attr("data-video-src");
        var autoplay = $(t).attr("data-autoplay");
        var muted = $(t).attr("data-muted");

        if(muted==1)
           $("#video1").attr("muted",true);
        else
           $("#video1").removeAttr("muted");

        $("#video1").find("source").attr("src",src);

        if(autoplay==1){
           $("#video1").attr("autoplay",true);
           $("#video1").play();
        }else{
           $("#video1").removeAttr("autoplay");
           $("#video1").pause();
        }

   }
</script>