CODEWITHSUNDEEP
javascripthtmlvideodynamicvideo.js
user2397591
user2397591

Reputation: 81

video.js - update video source when clicking on a link

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:

![sample of page][1]

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 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, (my error) instead I found this script/code is actually for Video.js

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

The javascript version for multiple source links

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

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?

Upvotes: 6

Views: 23273

Answers (3)

misterben
misterben

Reputation: 7821

This overwrites the video element's src attribute three times, so it will always be set to the webm video.

$("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");

Instead use the video.js API to load an array of sources so video.js can pick one the current playback tech can play:

$vid_obj.src([
  { type: "video/mp4", src: $content_path+$target+".mp4" },
  { type: "video/webm", src: $content_path+$target+".webm" },
  { type: "video/ogg", src: $content_path+$target+".ogv" }
]);

Updated fiddle: http://jsfiddle.net/mister_ben/8awNt/

Upvotes: 17

kenjikato
kenjikato

Reputation: 177

Adding to the overall answer to the original question, the video switching answered by misterben above still works in the current version (4.8.0) of video.js, but the code that changes the poster image does not work from the original question post, or in the jsfiddle code sample as of 9/5/2014.

You need to make two small modifications to user239759's original question code (referenced below) from:

// hide the current loaded poster
$("img.vjs-poster").hide();

 ...
 ...
 ...

// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();

to this:

// hide the current loaded poster
$(".vjs-poster").hide();

 ...
 ...
 ...

// replace the poster source
$(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();

This is if you are using the standard video.js code, and associated css.

It should also be noted for those that haven't figured it out from the code above, the poster images should be named the same as the videos except for the file extension, and placed in the same directory as the videos. Unless you use a different var for $content_path for the poster images.

Upvotes: 0

heff
heff

Reputation: 3239

The javascript example doesn't appear to include the video.js library. You might try including the following in the head.

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Otherwise, is there a way to view the page live somewhere?

Upvotes: 3

Related Questions