How can I pass the movie source (filename) and poster jpg via the URL?
i.e.
http:// mywebsite . com / index.html?movie_file=/movie2.mp4&poster_image=/movie2.jpg
Camen Design Forum
How can I pass the movie source (filename) and poster jpg via the URL?
i.e.
http:// mywebsite . com / index.html?movie_file=/movie2.mp4&poster_image=/movie2.jpg
Can you elaborate please? I don’t understand fully what you are asking.
Sure,
I have 23 videos I need to show. Instead of creating 23 pages with each video embed targeting a different video, I rather have just ONE page and via the URL tell the player what to load. This way I can just have 23 custom links but just one player and one html page.
I first read of this in the swfObject page:
(scroll down to "Passing variables into your movies using the “Flashvars” parameter" section)
It all depends on what you’re using.
Will you be using Javascript to get the value from the URL? Then you need to code your own function for to grab values from the URL or find one on the web. Unless you’re using a Javascript library that already includes a function for this, like SWFObject’s getQueryParamValue().
If you are working with a server side programming language those will often offer standard implementations. PHP for example includes the $_GET variable including all the variables in the query string. That way you could do something like:
~~~ HTML + PHP ~~~>
<video src="<?php echo $_GET['movie_file']; ?>" poster="<?php echo $_GET['poster_image']; ?>"></video>
<~~~
oh ok, I thought it could be done without a server side language or javascript, just HTML. thanks for the help :P
Yes, it could be done without server side code. You can use `location.href` in JavaScript to get the URL, and parse out the querystring. Doing it serverside however is more reliable because then the page won't break so easily.
(BTW, don’t use PHPs $_GET directly, that's one super-massive security hole, always escape your variable output)
ok, so far so good.
I was able to pull the variable from the URL using this:
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
</script>
<!-- <script>
alert( getQueryVariable("x") );
</script>-->
now, how do I get that variable into the <source /> tag?
If I want my variable to be "bunny", I assume it would look something like this:
<source src= [getQueryVariable("x") + ".mp4"] type="video/mp4" />
in order to get this:
<source src="bunny.mp4" type="video/mp4" />
can someone help me with the syntax and how to get javascript to render the variable inside the src="" ?
thanks much!
To get the variable in the <source> tag, you need to use the DOM. Try something like this:
var videoFile = getQueryVariable("v");
var videoElement = document.getElementById("mp4source");
videoElement.setAttribute("source", videoFile + ".mp4");
In which case you should add the ID attribute to the <source> tag, with the value of "mp4source". The above code gets the v parameter from the URI using your function, the second finds the page element of the ID "mp4", while the last line sets the source attribute to the desired one.
Furthermore, if you wish there is a video when you don't have a query variable, you can alter the first line so it goes like this:
var videoFile = (getQueryVariable("v") !== "") ? getQueryVariable("v") : "myothervideo";
Which has a fallback value should the URL lacks the v parameter.
However, whilst that would change the src of the HTML5 video, it wouldn't fixate the Flash fallback. mediaelement.js has a `setSrc` function, which AFAIK, will allow you to change the video file on an existing video instance, including the Flash fallback.
it worked!!!! thanks!!!
Your friendly neighbourhood moderators: Kroc, Impressed, Martijn