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

javascript html video dynamic video.js

22,501

Solution 1

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/

Solution 2

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?

22,501

Author by

user2397591

Updated on July 05, 2022

Comments

user2397591 almost 2 years

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?