Question

我正在使用Moodle来显示一些视频。视频播放器需要一个手写的查看器来限制控件，因为我无法让观众快进视频。我有大约30个视频，每个视频的HTML5页面都是相同的，除了应该播放的视频名称。因此，我想将视频名称传递给通用视频播放器HTML5文件。

其中一个页面的HTML5代码如下所示（删除了自定义控件的部分，因为它们在本次讨论中并不重要）：

<!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>

因此，不是拥有30个不同的HTML5文件，每个文件都有不同的视频基本名称（在这种情况下为“mikethefrog”，有三个不同的扩展名），我想将该基本名称传递给HTML5，沿着这些行“http://www.mysite.com/videoplayer.html?video=mikethefrog”，HTML5必须将该名称拉出来并在上面的HTML5的通用版本中替换该名称，附加三种不同的视频文件格式扩展名。

我想一个可能的路径是在我的javascript中获取此参数并为三种类型的视频文件构建三个变量，但是如何为src参数添加变量名？

非常感谢任何帮助或指向如何执行此操作的指示。

由于

Answer 1

您可以使用此javascript函数检索GET参数：

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, " "));
}

将ID添加到您的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>

并使用JQuery替换视频名称：

$(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();  
    }
});

将参数传递给HTML5

1 个答案: