List of videos with link to download another video without refresh

Question

List of videos with link to download another video without refresh

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

Hello.

I want to create a list of videos in which I will have a main video (bigger picture) and a sequenced list with others' thumbnail. However, in this thumbnail list you should have a link that will cause it to load into 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><liclass="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 you would have to get a javascript or jquery script to make the links change the url of < embed > without updating the page, but I have no idea how to do this.

Can anyone give me an idea there?

javascript jquery

asked by anonymous 10.06.2017 / 18:30

2 answers

Login with facebook Android PDF Upload by ajax

score 0 · Answer 1

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>

Okay, this is the framework I want to do (basically I already have), but how do I post the link for each item in that 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>

score 0 · Answer 2

Jquery

library

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

Script

$(document).ready(function(){$('#listalia').click(function(){varid=$(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

<ulid='lista'><liclass="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>