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>

哪个有效但仅适用于带有“video1”ID的视频元素，我需要它适用于每个视频元素。有没有办法在用户点击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>

Answer 2

首先将<video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>更改为<video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video>。

将此功能附加到您所有的div =＆＃34;视频＆＃34;点击事件

function Video()
{
    var Source = this.getElementsByTagName("video")[0].src;
    videoPreview.src = Source;
}

你现在正在装备。

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

2 个答案: