Changing multiple sources of source within video tag

JavaScript
1

Hello,

I am using the videojs plugin to add a video player to my site (http://videojs.com/). I have multiple videos on the same page that when the user clicks i want to display in the video player. I have not put the links in <li> tags they are simple <a> tags.

When I click on the link i want it to update the player with the new video. From what i can work out i need to do this on the onclick event. However, i need it to be able to update multiple sources within the <video> tag because each browser reads a different file (because onbviously they do not all support the same format)

I have made this work successfully for updating one of the sources, but can’t make it work for more the others… can anyone help?

This is the code i have been using for the video player:


<video id="video" class="video-js vjs-default-skin" controls width="960" height="544" autoplay="true" preload="auto" data-setup="{}">
<source src="#" type='video/mp4'>
<source href="#" type='video/webm'>
</video>

and this is the code for a couple of the links…


<a href="#" onclick="document.getElementsByTagName('video') .src = 'assets/videos/misc/antibioclic.mp4'">Antibioclic</a>
<a href="#" onclick="document.getElementsByTagName('video') .src = 'assets/videos/misc/google.mp4'">Google</a>

Any help is appreciated…

2

You can use the VideoJS API to change the src of the video.

See: http://videojs.com/docs/api/


 _V_("example_video_1").ready(function(){

   var myPlayer = this;

   // EXAMPLE: Start playing the video.
   myPlayer.play();
});

myPlayer.src("http://www.example.com/path/to/video.mp4");


//or for multiple vid sources:
myPlayer.src([
    { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
    { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
    { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);
3

AussieJohn,

I’ve been trying to do the same type of SRC change using the onClick method. But, I haven’t coded in javascript for a while, and I’m not sure how to incorporate the VideoJS code into my HTML page.

I’m trying to create a CSS playlist for the VideoJS player that will match the Flash Playlist on my website: www.ustv.us. Here is the code I have so far:

<html>

<head>
<meta name=“GENERATOR” content=“Microsoft FrontPage 5.0”>
<meta name=“ProgId” content=“FrontPage.Editor.Document”>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>New Page 1</title>

&lt;link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"&gt;
&lt;script src="http://vjs.zencdn.net/c/video.js"&gt;&lt;/script&gt;




&lt;style type="text/css" media="screen"&gt;

/* playlist style */
#playlist {
width:312px;
height:260px;
overflow-y:auto;
overflow-x:hidden;
border:1px solid #ccc;
padding:4px 10px 12px 10px;
background-color:#efefef;
margin-top:20px;
float:left;
}

/* playlist entry */
#playlist a {
display:block;
width:280px;
height:90px;
padding:7px;
background-color:#fff;
border:1px solid #ccc;
font:11px “bitstream vera sans”, “lucida grande”,verdana;
text-decoration:none;
margin-top:7px;
color:#666;
}

/* different states of a playlist entry */
#playlist a:hover {
background-color:#ffc;
}

#playlist a.progress {
background-color:#efefef;
}

#playlist a.playing {
border:1px solid #666;
background-color:#ffc;
}

#playlist a.paused {
border:1px solid #666;
background-color:#ffc;
}

/* elements inside playlist entry */
#playlist a img {
border:0px none;
float:left;
margin-right:10px
}

#playlist a strong {
color:blue;
padding-bottom:5px;
}

#playlist a em {
border:0px none;
float:left;
margin-right:10px;
background:url(‘/media/img/demos/clock.gif’) no-repeat 0 50%;
padding-left:20px;
color:#333;
font-style:normal;
margin-top:10px
}

#playlist{
margin-top: 0;
}
</style>

</head>

<body>

<video id=“HTML5_video_player” class=“video-js vjs-default-skin” controls
preload=“auto” width=“720” height=“480” poster=“http://www.ustv.us/HTML5_working/BillyB-Thats_Runoff_Man.jpg”
data-setup=“{}”>
<source src=“http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.mp4” type=‘video/mp4’>
<source src=“http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.webm” type=‘video/webm’>
</video>

<script type=“text/javascript”>

// <![CDATA[
var myPlayer=“HTML5_video_player”
// ]]>
</script>

<!-- the playlist. simple HTML controlled with CSS –>
<div id=“playlist”>

&lt;a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.mp4')"&gt;
    &lt;img src="http://www.ustv.us/dailies/daily_images/BillyB-RunoffMan1.png" width="120" height="67" /&gt;
    &lt;strong&gt;Baltimore Woods - Billy B Performance - That's Runoff Man&lt;/strong&gt;&lt;br /&gt;
    &lt;em&gt;0.22&lt;/em&gt;
&lt;/a&gt;

&lt;a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-With_My_Hand.mp4')"&gt;
    &lt;img src="http://www.ustv.us/dailies/daily_images/BillyB-WithMyHand.png" width="120" height="79" /&gt;
    &lt;strong&gt;Baltimore Woods - Billy B Performance - With My Hand&lt;/strong&gt;&lt;br /&gt;
    &lt;em&gt;0.22&lt;/em&gt;
&lt;/a&gt;

&lt;a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Water_Cycle.mp4')"&gt;
    &lt;img src="http://www.ustv.us/dailies/daily_images/BillyB-WaterCycle1.png" width="120" height="79" /&gt;
    &lt;strong&gt;Baltimore Woods - Billy B Performance - Water Cycle&lt;/strong&gt;&lt;br /&gt;
    &lt;em&gt;0.22&lt;/em&gt;
&lt;/a&gt;

&lt;a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Flies_in_Black.mp4')"&gt;
    &lt;img src="http://www.ustv.us/dailies/daily_images/BillyB-FliesInBlack.png" width="120" height="90" /&gt;
    &lt;strong&gt;Baltimore Woods - Billy B Performance - Flies In Black&lt;/strong&gt;&lt;br /&gt;
    &lt;em&gt;0.22&lt;/em&gt;
&lt;/a&gt;

</div>
<!-- let the rest of the page float normally –>

</body>

</html>

4

The way your calling the video player will cause an error as myPlayer is equal to a string not the player object, see the below.

var myPlayer = _V_('HTML5_video_player');