• 0

[Javascript] Changing VideoJS url src on button click?

Asked by DPyro,

 Share

Question

Grand Master

DPyro

Posted
Posted

I found the following code which is what I'm looking for but I need to modify it to work with dynamic urls which I'll fetch with php. How can I make that work, instead of loading local video files?

 

http://jsfiddle.net/swinginsam/NWbUG/

 

Ideally I want just a <a href> link to click which multiple videos. I'm not very good with javascript.

 

I tried changing 

$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");

 

to 

 

$("video:nth-child(1)").attr("src","http://url1.mp4");
$("video:nth-child(1)").attr("src","http://url2.mp4");
$("video:nth-child(1)").attr("src","http://url3.mp4");
 
but it just loads the same video...

12 answers to this question

Recommended Posts

  • 0
Mentor

snaphat (Myles Landwehr) Member

Posted
  • Member
Posted
  On 13/12/2013 at 01:03, DPyro said:

 

I found the following code which is what I'm looking for but I need to modify it to work with dynamic urls which I'll fetch with php. How can I make that work, instead of loading local video files?

 

http://jsfiddle.net/swinginsam/NWbUG/

 

Ideally I want just a <a href> link to click which multiple videos. I'm not very good with javascript.

 

I tried changing 

$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");

 

to 

 

$("video:nth-child(1)").attr("src","http://url1.mp4");
$("video:nth-child(1)").attr("src","http://url2.mp4");
$("video:nth-child(1)").attr("src","http://url3.mp4");
 
but it just loads the same video...

 

 

I don't know why, but they are just assigning the same attribute src 3 times in a row in that example. The .webm one is the one that finally gets played in the end.

 

Anyways it works as follows: a click event handler is registered to occur if a button is clicked. Depending on which button you click a different movie is selected.

 

//Click event handler
$("input[type=button]").click(function() { ... }


//Video selector
var $target         = "testvid_"+$(this).attr("rel");


//Add the movie to the video element.
$("video:nth-child(1)").attr("src",$content_path+$target+".webm");
  • 0
Mentor

snaphat (Myles Landwehr) Member

Posted
  • Member
Posted
  On 13/12/2013 at 03:58, DPyro said:

Ah, ok. How do I dynamically change the target variable with a different url.

 

Make the click button have some sort of unique id that is generated using php i.e. rel="http://myurl.com"

  • 0
Grand Master

DPyro

Posted
  • Author
Posted
  On 13/12/2013 at 04:04, snaphat (Myles Landwehr) said:

Make the click button have some sort of unique id that is generated using php i.e. rel="http://myurl.com"

 

Not quite sure what you mean...I tried this.

 

var $target         =  $(this).attr("rel");

 

$("video:nth-child(1)").attr("src",$target);

 

<input rel="http://url1.mp4" type="button" value="load video 1">

  • 0
Mentor

snaphat (Myles Landwehr) Member

Posted
  • Member
Posted
  On 13/12/2013 at 04:54, DPyro said:

Not quite sure what you mean...I tried this.

 

var $target         =  $(this).attr("rel");

 

$("video:nth-child(1)").attr("src",$target);

 

<input rel="http://url1.mp4" type="button" value="load video 1">

 

That is what I meant: the PHP should be generating the value of rel and you should be assigning the value to the video element's src attribute upon click.

  • 0
Grand Master

DPyro

Posted
  • Author
Posted
  On 13/12/2013 at 05:27, snaphat (Myles Landwehr) said:

That is what I meant: the PHP should be generating the value of rel and you should be assigning the value to the video element's src attribute upon click.

 

I can't get it to work?

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Dynamic Loading w/ video.js - jsFiddle demo by swinginsam</title>

	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' video.js ></script>
	<link rel="stylesheet" type="text/css" href="http://vjs.zencdn.net/c/video-js.css">
	<script type='text/javascript' src="https://vjs.zencdn.net/c/video.js"></script>


	<style type='text/css'>
		.wrap            { margin:30px auto 10px; text-align:center }
		.container       { width:640px; height:360px; border:5px solid #ccc }
		p                { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
	</style>

	<script type='text/javascript'>//<![CDATA[
	$(function(){
	var $target         = $(this).attr("rel");
	$("input[type=button]").click(function() {
		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",$target);
		  // 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="640" height="360" data-setup="{}">
			<source src=""  type="video/mp4">
		</video>
	</section>

	<div class="wrap">
		<input rel="http://static.bouncingminds.com/ads/5secs/baileys_5sec.mp4" type="button" value="load video 1">
		<input rel="http://static.bouncingminds.com/ads/15secs/dogs_600.mp4" type="button" value="load video 2">
		<input rel="http://static.bouncingminds.com/ads/30secs/sexy_subaru_carwash.mp4" type="button" value="load video 3">
	</div>
</body>
</html>
  • 0
Grand Master

DPyro

Posted
  • Author
Posted
  On 13/12/2013 at 06:18, snaphat (Myles Landwehr) said:

http://jsfiddle.net/35VR2/1/ -- works for me on this example after I did those modifications

 

Weird, something in my code wasn't working right...only thing left is I need to change the mime type for certain videos. (type='application/x-mpegURL')

  • 0
Mentor

snaphat (Myles Landwehr) Member

Posted
  • Member
Posted
  On 13/12/2013 at 06:28, DPyro said:

Weird, something in my code wasn't working right...only thing left is I need to change the mime type for certain videos. (type='application/x-mpegURL')

 

Figure it out? It definitely has to be something in the code or configuration

  • 0
Grand Master

DPyro

Posted
  • Author
Posted

So apparently desktop browsers don't support m3u8, yet I'm able to watch live streams on PS4 and ipod touch.  :s Still having issues with the ipod touch however using mimetype video/mp4. It plays both mp4 and m3u8 but only if I reload the page. ie. If I watch mp4 videos first the m3u8 stream won't work and need to reload, and vice versa.

  • 0
Mentor

snaphat (Myles Landwehr) Member

Posted
  • Member
Posted
  On 13/12/2013 at 23:48, DPyro said:

So apparently desktop browsers don't support m3u8, yet I'm able to watch live streams on PS4 and ipod touch.  :s Still having issues with the ipod touch however using mimetype video/mp4. It plays both mp4 and m3u8 but only if I reload the page. ie. If I watch mp4 videos first the m3u8 stream won't work and need to reload, and vice versa.

 

It probably initializes something when you play the video the first time. There might be code you can do to reinitialize things from scratch upon click, but I dunno.

  • 0
Grand Master

DPyro

Posted
  • Author
Posted
  On 13/12/2013 at 23:52, snaphat (Myles Landwehr) said:

It probably initializes something when you play the video the first time. There might be code you can do to reinitialize things from scratch upon click, but I dunno.

 

It's weird because I don't have this problem on PS4, both types work initially without needing to reload the page or switch mimetype. I know a way to fix it by specifying the right mimetype for each filetype but need change it dynamically somehow.

 

EDIT: Actually, when I click the buttons it launches the video on ipod without needing to hit play so I dunno what it's doing. The error I get on ipod when trying a different filetype is 'The operation could not be completed'.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.