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

  • Posts

    • The official Funny Pictures thread

      By +primortal · Posted

    • Denmark ditching Windows and Office for Linux as it may not want to rely on Microsoft, Trump

      By Lamp Post · Posted

      "A Microsoft spokesperson said that it had been in contact with the court since February “throughout the process that resulted in the disconnection of its sanctioned official from Microsoft services.” The spokesperson added that “at no point did Microsoft cease or suspend its services to the ICC.” Microsoft declined to comment further in response to questions regarding the exact process that led to Khan's email disconnection, and exactly what it meant by “disconnection.” The ICC declined to comment. However, German business magazine WirtschaftsWoche reported Tuesday that Microsoft's lawyers have now reached the view that it merely provides a technical platform and that its customers decide whether to give their employees access to its services. Microsoft would no longer intervene in scenarios similar to the ICC case, WirtschaftsWoche wrote." Source: https://www.politico.eu/articl...ump-tech-icc-amazon-google/ So while they haven't targeted the ICC, they seem to have targeted a sanctioned individual and cut that individual off from their services. At least I cannot read the statement from their spokesperson in any other way. It can however be understood as they did this on behalf of the ICC, which would line up with Smith's statements that they never cut off services to the ICC. But I don't know if there is any confirmed sources back that up.
    • Latest Patch Tuesday has broken DHCP Server in all Windows Server editions

      By Nick H. · Posted

      Oof, that's a pretty glaring issue. They seem to be consistently proving that they don't do the necessary QA before sending things out.
    • Politically funny images of the World

      By +primortal · Posted

    • Rufus 4.9.2256

      By xillibit · Posted

      They have removed th way to download directly the iso of windows from rufus ? i have tried the version 4.9, the button selection isn't a select list to choose download

  • 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
      617
    2. 2
      ATLien_0
      281
    3. 3
      +FloatingFatMan
      174
    4. 4
      Michael Scrip
      153
    5. 5
      Steven P.
      125
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!