Update video source when clicking on a link below the video frame

timer Asked: May 18th, 2013

Question Description

I need support with this Programming question so I can learn better.

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:

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:
  <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"/>

The javascript version for multiple source links

<!DOCTYPE html>

       <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 }
  $("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
  $vid_obj.ready(function() {
  // hide the video UI
  // and stop it from playing
  // assign the targeted videos to the source nodes
  // replace the poster source
  // reset the UI states
  // load the new sources
  </script>   </head>
       <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-
  <source src=""  type="video/mp4">
  <source src=""  type="video/ogg">
  <source src=""  type="video/webm">
  <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">

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

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

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.

Student has agreed that all tutoring, explanations, and answers provided by the tutor will be used to help in the learning process and in accordance with 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!

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