Adam Adam - 1 month ago 9
HTML Question

HTML, using parameters to display a different video for different params

So, I want to create something that uses parameters to change the video when the param (id) is different.The value of the param will be the name of the video, i.e = index.html?id=1 the video name would be 1.mp4.
Here is my code:

<!DOCTYPE html>
<head>
</head>
<body>
<script>
var param = /[&?]path=([^&]+)/.exec(location.search);
param = param ? param[1].replace(/"/g, '&quot;') : '';
document.write('<object type="application/pdf" width="100%" height="100%">\n' +
'<param name="id" value="' + param + '" />\n</object>');
</script>
<video id="1" width="100%" height="100%" preload controls>
<source src=param + ".mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</body>
</html>


Howerver it wont work please help.

Answer

If it's always going to be a variant of index.html?id=1 where the numbers after ?id= (i.e ?id=1, ?id=2....?id=20) change, simply get the url of the page, split it at the "?id", concatenate that with ".mp4", change the source and you're done!

HTML

<video width="100%" preload controls>
    <source id="video" src="default.mp4" type='video/mp4;'>
</video>

JS

var browserURL = window.location.href; //Get browser location
var id = browserURL.split('?id=')[1]; //split at '?id=',get item [1] (second part)
document.getElementById("video").src= id + '.mp4'; //change video source
Comments