update video source when clicking on a link

pvaaxvq
timer Asked: May 20th, 2013

Question Description

I am trying to have a page with embedded video that dynamically will change the source when a link below the video frame is clicked. The source videos are on my host server.
i.e. this pic illustrates it:
testvidresult.png



I came across [this page], which seems to have the answer, but I tried it and it didn't work.  Following the example, I pasted the css & javascript in the <head> and the necessary html in the body.  I updated all the references to my urls and tried to keep file names the same as the example for testing.
Below is what I tried.  

Can someone point out my errors, or provide a more elegant way of doing this?  Basically dynamically change embedded video when link is clicked and the video work in all the typical browsers, and most devices.
This is for a wordpress site, using JW Player for wordpress

It loads the pre image but doesn't play.

As a test I tried this and it does play single video properly:
<code>
  <video id="testvideo" class="video-js vjs-default-skin" width="440" height="300"  controls="controls">
  <source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/>
  <source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/>
  <source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/>
  </video>
</code>

The javascript version for multiple source links

<code>
<!DOCTYPE html>

  <html>
  <head>
  <title></title>
  <style media="screen" type="text/css">
  .wrap  { margin:30px auto 10px; text-align:center }
  .container  { width:440px; height:300px; border:5px solid #ccc }
  p  { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
  </style>
  <script>
  $("input[type=button]").click(function() {
  var $target  = "testvid_"+$(this).attr("rel");
  var $content_path  = "http://www.mywebsite.net/videos/";  
  var $vid_obj  = _V_("div_video");
   
  // hide the current loaded poster
  $("img.vjs-poster").hide();
   
  $vid_obj.ready(function() {
  // hide the video UI
  $("#div_video_html5_api").hide();
  // and stop it from playing
  $vid_obj.pause();
  // assign the targeted videos to the source nodes
  $("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
  $("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
  $("video:nth-child(1)").attr("src",$content_path+$target+".webm");
  // replace the poster source
  $("img.vjs-poster").attr("src",$content_path+$target+".png").show();
  // reset the UI states
  $(".vjs-big-play-button").show();
  $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
  // load the new sources
  $vid_obj.load();
  $("#div_video_html5_api").show();
  });
  });
   
  $("input[rel='01']").click();
  </script>  </head>
   
  <body>
  <section class="container wrap">
  <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
   
  setup="{}">  
  <source src=""  type="video/mp4">
  <source src=""  type="video/ogg">
  <source src=""  type="video/webm">
  </video>
  </section>
   
  <div class="wrap">
  <input rel="01" type="button" value="load video 1">
  <input rel="02" type="button" value="load video 2">
  <input rel="03" type="button" value="load video 3">
  </div>
   
  </body>
  </html>
</code>

The preload image for the 1st video loads but no video, error is
"No video with supported format and MIME type found"

So I added the source for the first video in this section

  setup="{}">  
  <source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4"  type="video/mp4">
  <source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv"  type="video/ogg">
  <source src="http://www.mywebsite.net/videos/videos/testvid_01.webm  type="video/webm">
  </video>

Result the 1st video loads but not the other linked videos.

names of the videos/png:
testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_01.png
testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_02.png
testvid_03.mp4, testvid_03.ogv, testvid_03.webm, testvid_03.png

I have tried this both in wordpress page and html page the results are the same.

I'm not sure even if this script will do what I want?

To get paid for the solution:  requires a working example, not just code suggested changes.

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

This question has not been answered.

Create a free account to get help with this and any other question!

Related Tags

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors