Html 加载按名称传递到URL的视频_Html

Html 加载按名称传递到URL的视频

html

Html 加载按名称传递到URL的视频,html,Html,我正在尝试使用HTML或HTML5在网页上播放驻留在服务器上的许多视频文件中的一个。它应该基于通过参数传递到url的任何文件名运行。这是我到目前为止的代码，但它不起作用示例：www.mysite.com？video=myVideo.mp4 因此myvideo.mov将驻留在服务器上的文件夹中。我希望参数video等于视频文件名 <!DOCTYPE html> <html> <body onLoad="GetVideo()"> <div style="

我正在尝试使用HTML或HTML5在网页上播放驻留在服务器上的许多视频文件中的一个。它应该基于通过参数传递到url的任何文件名运行。这是我到目前为止的代码，但它不起作用

示例：www.mysite.com？video=myVideo.mp4
因此myvideo.mov将驻留在服务器上的文件夹中。我希望参数video等于视频文件名

<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">

<div style="width: 100%; height: 768px;  controls Autoplay=autoplay; overflow: hidden;">
 <video id="video" width="100%" loop autoplay controls>
  <source id="#videoSource" type="video/mp4">
  Your browser does not support the video tag.
 </video>
</div>

<script>
function GetVideo() {
     x = getUrlVars()["video"];
     document.querySelector("#videoSource").setAttribute("src", x);
}

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

</script>

</body>
</html>


您的浏览器不支持视频标记。
函数GetVideo（）{
x=getUrlVars（）[“视频”]；
document.querySelector（“#videoSource”）.setAttribute（“src”，x）；
}
函数getUrlVars（）{
var vars={}；
var parts=window.location.href.replace（/[？&]+（[^=&]+）=（[^&]*）/gi，函数（m，键，值）{
变量[键]=值；
});
返回变量；
}

预期结果将是：运行此URL示例：

www.mysite.com？video=myvideo.mp4

它应该播放服务器上站点文件夹中的视频文件“myvideo.mp4”

更新后的示例—这是我希望它做的—我采纳了下面的建议，但下面的建议不起作用。我正在尝试让它在所有浏览器上运行：

示例：www.mysite.com？video=myVideo.mp4&folder=myFolder

<!DOCTYPE html>
<html>
<body>

  <div style="width:100%;overflow: hidden;">
    <video width="100%" controls>
       <source src='about:blank' type="video/mp4">
    </video>
  </div>

<script>

function loadVideo() { 
  var player = document.querySelector('video');
  var base = 'http://ercx.natfas.com/';

  var videoFile = getUrlVars()["video"];
  var folder = getUrlVars()["folder"];

  if (${folder} = "") {
    player.src = '${base}${videoFile}';
  } else {
    player.src = '${base}${folder}/${videoFile}';
  }
  player.load();
  player.play();
}

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

loadVideo();

</script>
</body>
</html>


函数loadVideo（）{
var player=document.querySelector（'video'）；
var base=http://ercx.natfas.com/';
var videoFile=getUrlVars（）[“video”]；
var folder=getUrlVars（）[“folder”]；
如果（${folder}=”“）{
player.src='${base}${videoFile}'；
}否则{
player.src='${base}${folder}/${videoFile}'；
}
player.load（）；
player.play（）；
}
函数getUrlVars（）{
var vars={}；
var parts=window.location.href.replace（/[？&]+（[^=&]+）=（[^&]*）/gi，函数（m，键，值）{
变量[键]=值；
});
返回变量；
}
loadVideo（）；


您的浏览器不支持视频标记。
函数GetVideo（）{
x=getUrlVars（）[“视频”]；
document.querySelector（“#videoSource”）.setAttribute（“src”，x）；
}
函数getUrlVars（）{
var vars={}；
var parts=window.location.href.replace（/[？&]+（[^=&]+）=（[^&]*）/gi，函数（m，键，值）{
变量[键]=值；
});
返回变量；
}

视频文件阵列

首先，您需要使用，和/或。请勿使用MOV（如问题中所述）。如果您让Safari通过

标记播放MOV，这意味着您有一个方便的方法：

永远不要假设用户有插件，或者假设用户会下载并安装插件（如果建议这样做的话）

假设所有视频都位于一个位置（如上文所述），将其文件名制作一个数组：

接下来，将路径存储到变量中：

声明索引号并引用

标记：

使用

.map（）

处理数组，并使用

基函数对数组中的每个元素进行插值（请参见演示中的函数loadVideo（）
）


如果您想一个接一个地播放文件，请不要使用[loop]
属性（如问题的HTML所示）。相反，将
标记注册到end
事件，并增加索引（请参阅演示结束时的eventListener）

而且
不能播放视频，因此
和[autoplay]
属性在
上是不必要的（与所讨论的HTML相关）

演示
此视频播放器将自动加载（如问题的HTML所示）

var player=document.querySelector（'video'）；
var base=https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var文件=['005609.mp4'、'005610.mp4'、'005612.mp4']；
var指数=0；
函数loadVideo（主机、阵列、索引）{
var url=array.map（函数（vid，idx）{
返回`${host}${vid}`；
});
player.src=url[index]；
player.load（）；
player.play（）；
}
player.addEventListener（'end'，函数（e）{
如果（索引>=files.length）{
指数=0；
加载视频（基本、文件、索引）；
}否则{
加载视频（基本、文件、索引）；
}
索引++；
});
加载视频（基本、文件、索引）
以最接近工作的方式回答Tibbelit的问题。它在Chrome上不起作用，但在其他浏览器上似乎起作用


您的浏览器不支持视频标记。
函数GetVideo（）{
x=getUrlVars（）[“视频”]；
document.querySelector（“#videoSource”）.setAttribute（“src”，x）；
}
函数getUrlVars（）{
var vars={}；
var parts=window.location.href.replace（/[？&]+（[^=&]+）=（[^&]*）/gi，函数（m，键，值）{
变量[键]=值；
});
返回变量；
}
您（0）缺少一个“
在开始正文标记中。当此值被修复时，GetVideo中的x
将获得正确的值。不确定你想用document.videoSource=x做什么-这就是你的问题所在。
标记不能播放.mov
文件，因此请将其转换为MP4和/或WebM。你为什么要删除URL？它们需要精确的字符。它们将不再指向文件的位置。我看不出这是如何可用的…当然，它不会在任何浏览器中工作。浏览器需要有效的url而不是删除字符串。您是否查看了getUrlVars（）
返回的内容？现在，您应该得到错误，因为它已损坏…/[？&]+（[^=&]+）=（[^&]*）/gi，我刚刚发现另一个错误，它不是黑客和粘贴的受害者。。。转到您是否收到JavaScript错误或其他信息继续？使用running example更新了答案。hmmm，我尝试使用您的最新示例，但仍然不起作用。我只是得到一个空白的视频窗口。它不会让我在这里粘贴代码。。。说太长了，我用了你的密码。在服务器文件夹中放置了test.mp4。然后尝试通过？video=test.mp4 a
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];

var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';

var index = 0;
var player = document.querySelector('video');