将参数传递给HTML5

我正在使用Moodle来显示一些视频。视频播放器需要手写查看器来限制控件，因为我无法让观看者快速浏览视频。我有大约30个视频，并且每个视频的HTML5页面与应该播放的视频名称的例外是相同的。因此，我想将视频名称转换为通用视频播放器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参数？

任何帮助，或指示如何做到这一点，将不胜感激。

感谢

来源

2014-01-15 user2574497

您可以使用此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(); 
    } 
});

来源

2014-01-15 19:01:30 MamaWalter

哇，一些美丽的东西在那里。我想我明白了，但我在执行时遇到了麻烦。这是我第一次接触JQuery，所以我不得不问一个愚蠢的问题。与第三个框中的JQuery代码位于同一个文件中的第一个框中的JavaScript代码是什么？我没有下载jQuery的文件，并在我的HTML \t \t – user2574497

此外，视频似乎并未加载，所以显然无法播放。我得到的只是一个空白的屏幕。我试图在其中放置一些代码来进行调试，但是我也失败了。 – user2574497

是的，你可以把所有的JavaScript文件。而对于jQuery，您可以添加：''。所有这些对于一些PHP来说可能会更容易。 – MamaWalter

将参数传递给HTML5

回答

相关问题