CODEWITHSUNDEEP
javascripthtmlparameters
user2574497
user2574497

Reputation: 13

Passing parameters to HTML5

I am using Moodle to display some videos. The video player required a handwritten viewer to limit the controls, as I can't allow the viewer to fast forward through the video. I have about 30 videos, and the HTML5 page for each is identical with the exception of the name of the video that is supposed to play. Therefore, I'd like to pass the name of the video into a generic video player HTML5 file.

My HTML5 code for one of these pages looks like this (with the section for the custom controls removed as they aren't important in this discussion):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style-ipad.css" type="text/css" />
</head>
<body>  
    <div id="video-container">
        <video id="video1" autoplay poster="loading.jpg" preload="auto" oncontextmenu="return false;" >
              <source src="videos\mikethefrog.mp4" type="video/mp4" />
              <source src="videos\mikethefrog.webm" type="video/webm" />
              <source src="videos\mikethefrog.ogv" type="video/ogg" />
        </video>
    </div>
    <script src="script.js"></script>
</body>
</html>

So rather than having 30 different HTML5 files, each with a different base name for the video ("mikethefrog" in this case, with three different extensions), I'd like to pass that base name into HTML5, along the lines of "http://www.mysite.com/videoplayer.html?video=mikethefrog", and the HTML5 would have to pull that name out and substitute that name in the generic version of the HTML5 above, appending the three different video file format extensions.

I guess one possible path is to get this parameter in my javascript and build three variables for the three types of video files, but how to I put a variable name in for the src parameter?

Any help, or a pointer to how to do this, would be greatly appreciated.

Thanks

Upvotes: 1

Views: 3541

Answers (1)

MamaWalter
MamaWalter

Reputation: 2113

You can use this javascript function for retrieve GET parameters:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

add ID's to your HTML.

<div id="video-container">
    <video id="video1" oncontextmenu="return false;" >
          <source id="videoMp4"src="" type="video/mp4" />
          <source id="videoWebm"src="" type="video/webm" />
          <source id="videoOgg" src="" type="video/ogg" />
    </video>
</div>

and use JQuery for replace video name:

$(document).ready(function(){
    var videoname = getParameterByName("video");
    if(videoname) {          
        var url = 'videos\\' + videoname;

        $('#videoMp4').attr('src',url + ".mp4");
        $('#videoWebm').attr('src',url + ".webm");
        $('#videoOgg').attr('src',url + ".ogg");

        var player = document.getElementById('video1'); 
        player.load();
        player.play();  
    }
});

Upvotes: 2

Related Questions