2

So I have a simple page with one div container and a button, I want the user to be able to tap the button and load a new video into the div.

I've got 8 videos in total the page starts off with video one on autoplay and loop, then if the user taps the button at the bottom of the page video 2 is loaded and is autoplayed and looped until they tap the button again which would load video 3.

Hope that makes sense! I'm sure this is easy to do but know it would take me days to figure out!

Any help would be great!

Here's my code,

<div id="vidBox">
    <video width= "977" height= "721" src= "1.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>
</div>

$("#vidBox").empty().append( video width= "977" height= "721" src= "2.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
$("#vidBox").empty().append( video width= "977" height= "721" src= "3.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
$("#vidBox").empty().append( video width= "977" height= "721" src= "4.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
etc etc etc

HERE'S MY UPDATED CODE

<!DOCTYPE html> 
<html>
<head>
<title>Video Player</title> 
<script type="text/javascript">
    $("document").ready(function () {
    var vid1 = $("<video width= "977" height= "721" src= "1.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid2 = $("<video width= "977" height= "721" src= "2.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid3 = $("<video width= "977" height= "721" src= "3.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid4 = $("<video width= "977" height= "721" src= "4.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid5 = $("<video width= "977" height= "721" src= "5.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid6 = $("<video width= "977" height= "721" src= "6.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid7 = $("<video width= "977" height= "721" src= "7.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid8 = $("<video width= "977" height= "721" src= "8.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
});
</script>
<script>
    window.myVids = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4", "6.mp4", "7.mp4", "8.mp4"];
</script>
<script>
   var currentIndex = 0;
   var $video = $("#vidBox video");
   $("#myButton").click(function() {
      video.attr("src", myVids[++currentIndex]);
   });
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div id="vidBox">Content for New Div Tag Goes Here</div>
<button id="myButton">Click Me</button>
</body>
</html>
1
  • 1
    var count = 1; $('next').on('click', function () { $('.vidbox').attr('src', count+'.mp4'); count++; }); try this.
    – Omar
    Jun 30, 2013 at 21:59

1 Answer 1

0

THis is something you do not do like you want it to do :)

There is a typical approach for this, using some data. Do not create this lines of code where you empty the area and then append something. If you look at your code, you will see, that there is everything the same except the "src" attribute. So why not make things simpler and more reusable.

think about some data you let come from the server... put them into the view

<script>
    window.myVids = ["1.mp4", "2.mpg", ...];
</script>

now you have a simple data strucutre globaly awailable in the window. Although it is not the best practice, it is enough for now.

now hook up your button, which will just replace the src attribute. I´m not sure right now, if it will play the next movie if you just change the src attribute, but this you can try by your self.

<script>
   var currentIndex = 0;
   var $video = $("#vidBox video");
   $("#myButton").click(function() {
      video.attr("src", myVids[++currentIndex]);
   });
</script>

UPDATE

Oh dude, your update looks horrible. Ok, you can be lucky i have a good day...

<!DOCTYPE html> 
<html>
<head>
<title>Video Player</title> 
<script type="text/javascript">
    $("document").ready(function () {
        window.myVids = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4", "6.mp4", "7.mp4", "8.mp4"];
        var currentIndex = 1;
        var $video = $("#vidBox video");
        $("#myButton").click(function() {
             video.attr("src", myVids[++currentIndex]);
        });
    });
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div id="vidBox">
    <video width= "977" height= "721" src= "1.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"></video>
</div>
<button id="myButton">Click Me</button>
</body>
</html>
5
  • Thanks guys but i really dont know what i'm doing here i'm just making a mess, i need to learn how to use jquery and quick! Jul 1, 2013 at 15:27
  • :) look my answer (i didnt test it, but try it)
    – Luke
    Jul 2, 2013 at 16:06
  • hey just tried that code above the buttons not doing anything on click :( am i missing something in the head? sorry to be so lame i'm just starting to learn jqm and javascript, cheers Jul 2, 2013 at 17:49
  • there is this one variable "video". I copied your bug. you see there is one "$video" and one "video". So change the second to "$video" and try again...
    – Luke
    Jul 10, 2013 at 17:27
  • yeah the click is not doing anything :( Jul 11, 2013 at 7:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.