List of videos with link to load another video without refresh

Asked

Viewed 480 times

1

Hello.

I want to create a list of videos in which I will have a main video (bigger picture) and a list sequence with thumbnail of the others. However, in this thumbnail list there should be a link that causes it to click on the main video frame.

Something like:

.video {
  background: #005299;
  margin: 10px;
  width: 480px;
  height: 320px;
}

.miniatura {
  background: #0091ea;
  color: #fff;
  margin: 10px;
  width: 105px;
  height: 100px;
  float: left
}
<ul>
  <li class="video">
    <embed width="480" height="320" src="https://video.com/video.mp4">
  </li>
  <li class="miniatura"><a href="#">VIDEO 1</a></li>
  <li class="miniatura"><a href="#">VIDEO 2</a></li>
  <li class="miniatura"><a href="#">VIDEO 3</a></li>
  <li class="miniatura"><a href="#">VIDEO 4</a></li>
</ul>

Well, now in this structure would have to receive a javascript script or jquery to make the links change the url of < embed > without updating the page, only I have no idea how to do it.

Someone can give me an idea there?

javascript jquery

2 answers

0

Jquery

library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

$(document).ready(function() {
    $('#lista li a').click(function(){
        var id = $(this).attr('id');

        if (id=="v1"){
            $("#video").html('<embed width="480" height="320" src="https://video.com/video1.mp4">');
        }
        if (id=="v2"){
            $("#video").html('<embed width="480" height="320" src="https://video.com/video2.mp4">');
        }
        if (id=="v3"){
            $("#video").html('<embed width="480" height="320" src="https://video.com/video3.mp4">');
        }
        if (id=="v4"){
            $("#video").html('<embed width="480" height="320" src="https://video.com/video4.mp4">');
        }
    });
});

HTML

<ul id='lista'>
  <li class="video">
   <div id="video"><embed width="480" height="320" src="tito.mp4"></div>
  </li>
  <li class="miniatura"><a id="v1" href="#">VIDEO 1</a></li>
  <li class="miniatura"><a id="v2" href="#">VIDEO 2</a></li>
  <li class="miniatura"><a id="v3" href="#">VIDEO 3</a></li>
  <li class="miniatura"><a id="v4" href="#">VIDEO 4</a></li>
</ul>

  • Oops, sounds interesting, I just saw it and I’ll test it, but one question first. The <li> thumbnails, I intend to pull from the database with PHP, while or foreach. The passing of the Ids will work?

  • Ai only viewing PHP, while or foreach, but can create with something like < ? php echo "id=v". $i ? >

  • i use a crud, "kkk" $list = list('table', "WHERE status='1' ORDER BY id DESC LIMIT $pageReturn[1], $pageReturn[2]"); foreach ($list $video):? > <! -- structure --> <?= $video->link ? > <! -- structure --> <? endforeach; ?>

  • Xiiii, spoke Greek to me, hahaha

  • kkk see, <?= $video->link ?> this is the echo that returns the value of the video link pulled from DB (could be any other value like <?= $video->titulo_video ?> etc.). - I will make another answer to explain better.

0

Basically my php structure is generated by this code.

<ul id='lista'>
  <li class="video">
    <div id="video">
      <embed width="480" height="320" src="https://www.youtube.com/embed/SNKE_B__51E">
    </div>
  </li>
  <? $listar = listar('video', "WHERE status='1' ORDER BY id DESC LIMIT 4");
    foreach ($listar as $video):
?>

    <li class="miniatura">
      <a id="v1" href="<?= $video->link?>">VIDEO 1</a>
    </li>

    <? endforeach; ?>
</ul>
Ok, this is the structure I intend to do (basically I already have), but how do I launch the link of each item of this loop in the jquery function?

??? ->

<script>

    $(document).ready(function () {
        $('#lista li a').click(function () {
            var id = $(this).attr('id');

            if (id == "v1") {
                $("#video").html('<embed id="embed" width="480" height="320" src="https://www.youtube.com/embed/5gDjYPSlnAE">');
            }
            if (id == "v2") {
                $("#video").html('<embed id="embed" width="480" height="320" src="https://www.youtube.com/embed/HLbLg2FVQ68">');
            }
            if (id == "v3") {
                $("#video").html('<embed id="embed" width="480" height="320" src="https://www.youtube.com/embed/-KTIswXkBPw">');
            }
            if (id == "v4") {
                $("#video").html('<embed id="embed" width="480" height="320" src="https://www.youtube.com/embed/MLi6OWFWYmc">');
            }
        });
    });

</script>

  • you used the field for answers, you better remove that answer and create another question or edit your question upstairs

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.