[Javascript] Changing VideoJS url src on button click?

2,875 · December 13, 2013

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

1,560 · December 13, 2013

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

2,875 · December 13, 2013

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

1,560 · December 13, 2013

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"

2,875 · December 13, 2013

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

1,560 · December 13, 2013

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.

2,875 · December 13, 2013

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>

1,560 · December 13, 2013

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

2,875 · December 13, 2013

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

1,560 · December 13, 2013

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

2,875 · December 13, 2013

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.

1,560 · December 13, 2013

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.

2,875 · December 13, 2013

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

Sign In

[Javascript] Changing VideoJS url src on button click?

Question

DPyro

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

snaphat (Myles Landwehr) Member

Link to comment

Share on other sites

DPyro

Link to comment

Share on other sites

Recently Browsing 0 members

Popular Now

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker