2

Im really new to JavaScript and I started a new project that consists in a video player and editor.

I have this modal Box:

<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>

And I have this video previews that I've done like this:

<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>

What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.

For that I've tried to do this in JavaScript:

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

Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?

Thank you for your help, if you have any questions or suggestions please address them to me.

Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
Mr.Toxy
  • 357
  • 4
  • 19
  • You have repeated ids like: id="ClickHere" – Alvaro Jan 07 '17 at 18:46
  • Yes I meant to do that because the action must occur everytime the user clicks the div. So if I have múltiple divs doing the same thing If I attribute the same id to those divs it will work when the user clicks the div. I could probably use the class tho – Mr.Toxy Jan 07 '17 at 19:25
  • 3
    [You shouldn't have duplicated ids](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme). – Alvaro Jan 07 '17 at 19:27

2 Answers2

3
<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>

If you have a basic modal, you can change the source of video and start to play.. but first, stay away to use same id into different tags in same page. Second; to use "this" as a parameter, is more simple way to catch clicked div or another tag...

<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>

When you use "this" as a parameter, dont need any id to find which div was clicked.

<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>
Serhat MERCAN
  • 1,078
  • 3
  • 14
  • 31
  • I like your aproach but in your answer you took out the
    element where the video element is inserted. Doent that make any difference when it comes to the code you've writte for I have? Hmmm I've read it twice and I understand what you did, but I need to maintain the div
     – Mr.Toxy Jan 07 '17 at 23:58
  • divs are not problem.. they can stay, I think just you dont need – Serhat MERCAN Jan 08 '17 at 00:03
  • foi what I need unfortunatly I need them now, but I really like your aproach. I will work around the divs if needed – Mr.Toxy Jan 08 '17 at 02:12
  • I've used your example, but now I can't get my modal box to show :\ And I'm not seeing why tho, the code is fin from my perspective – Mr.Toxy Jan 08 '17 at 12:06
  • can you please check this link https://jsfiddle.net/3c6kds64/ the image element contains a class called "image" and in the JS I say that whenever an element with that class is clicked I change the style of the css. But it's not working now and I can't find any reason to it – Mr.Toxy Jan 08 '17 at 12:15
  • in your code in JS fiddle in this line: `document.getElementsByClassName("image")[0].onclick = function() {` I understand what it does but whay is the `[0]` for? Im accessing the first element with the image class that was clicked? what about I change it to `[2]` ? whats the difference? – Mr.Toxy Jan 08 '17 at 15:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132638/discussion-between-serhat-mercan-and-mr-toxy). – Serhat MERCAN Jan 08 '17 at 16:49
3

change <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video> to <video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video> first.

Attach this function to all your div's of class="video" click event

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

You're on gears now.

Bekim Bacaj
  • 5,707
  • 2
  • 24
  • 26