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

  • Popular Now

  • Posts

    • It's been four years, and I still don't have a strong enough reason to upgrade to Windows 11

      By +sphbecker · Posted

      There is a lot of truth to that, but also, a lot of those issues were due to 3rd parties being slow to support Vista. That doesn't explain all users, but a lot of them. Win7 didn't have better support for XP-era hardware and software, it simply didn't have to deal with it as much because Vista has already blazed the way and forced that stuff to be updated or replaced.
    • Meta says you'll soon be getting ads on WhatsApp

      By Arceles · Posted

      MIght as well go back to good old SMS. Or switch to other services.
    • The $80 video game - A new frontier of cost, or a bridge too far?

      By freedonX · Posted

      Nintendo 64 games were $60-$70 Playstation 1 were $50-$60 28 years ago. Heck I remember paying $70 for Final Fantasy IV (2) in 1991 for SNES. Salarys have gone up, both for the consumer's salary and the developer's salary. So I think it's pretty reasonable for $80games today. Not that I pay for new games, I don't have the time to play games as much as before. So I tend to buy them 2 years after release.
    • It's been four years, and I still don't have a strong enough reason to upgrade to Windows 11

      By +sphbecker · Posted

      I hear you on that, and if that is happening, then its bad. Could you give an example please? People make these comments all the time but rarely provide an example.
    • Firefox gets new way to pin and unpin tabs

      By TarasBuria · Posted

      Firefox gets new way to pin and unpin tabs by Taras Buria Mozilla Firefox recently received a long-anticipated feature: vertical tabs. It arrived in March 2025 as part of the Firefox 136 update. Now, Mozilla is introducing another welcome improvement to tab management in its browser, making it easier for users to pin and unpin tabs in Firefox. With the latest Firefox Nightly update, Mozilla implemented a new way to pin or unpin tabs: you can simply drag the current page to another pinned tab to pin or drag it out to unpin it. As simple as that. The new logic works with both vertical and horizontal tab views, and it eliminates the need to use context menus. The only prerequisite is that you need to have at least one pinned tab for the dragging to work. Otherwise, you will simply move the tab across the strip. It is nice to see Firefox implementing this small convenience for customers. However, some argue that there is still room for improvement. Dragging tabs is cool, but a dedicated shortcut could be an even better and quicker way to pin or unpin your tabs. That said, other mainstream browsers lack this feature as well. The improved tab pinning is now available in Firefox Nightly, the least stable update channel. Mozilla uses it to test early changes and big platform changes, which could be buggy, unstable, or feature-breaking. Therefore, it is probably not a very good idea to use Nightly builds as your main browser. Still, you can run Firefox Nightly side-by-side with other channels for testing purposes. If you are curious, get it from the official website using this link.

  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      636
    2. 2
      ATLien_0
      278
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      156
    5. 5
      Steven P.
      128
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!