视频文件阵列

Question

我正在尝试获取驻留在服务器上的许多视频文件之一，以使用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>

预期结果将是：运行此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>

Answer 1

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

看起来正在实现我们想要的目标？ =）

---

---旧

您需要在视频元素上设置正确的源，即

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

所以在您的情况下：

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

另外，您在行上缺少“”：

<body onLoad="GetVideo()>

Answer 2

视频文件阵列

首先，您需要使用MP4，Ogg和/或WebM。请勿使用MOV（如所提及）。如果您使Safari通过<video>标签播放MOV，则意味着您有a plugin可以方便地这样做：
1. 切勿假设用户有插件，也不要假设用户将下载并安装一个插件。
2. The majority of the world uses PC not Macs。
假定所有视频都在一个位置（如所述），请制作其文件名数组：

var files = ['005609.mp4', '005610.mp4', '005612.mp4'];

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

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

声明索引号并引用<video>标记：

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

用.map()处理数组，并用base插入数组中的每个元素（请参见演示中的function loadVideo()）。
如果要一个接一个地播放文件，请不要使用[loop]属性（如问题HTML所示）。而是将<video>标签注册到ended事件并递增index（请参见演示末尾的eventListener）。

另外，<div>无法播放视频，因此[controls]上不需要[autoplay]和<div>属性（与所讨论的HTML相同）。

演示

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

var player = document.querySelector('video');
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
var index = 0;

function loadVideo(host, array, index) {
  
  var urls = array.map(function(vid, idx) {
    return `${host}${vid}`;
  });

  player.src = urls[index];
  player.load();
  player.play();
}

player.addEventListener('ended', function(e) {
  
  if (index >= files.length) {
    index = 0;
    loadVideo(base, files, index);
  } else {
    loadVideo(base, files, index);
  }
  index++;
});

loadVideo(base, files, index);

<!DOCTYPE html>
<html>

<body>

  <div style="width:480px;overflow: hidden;">
    <video width="100%" controls>
  <source src='about:blank' type="video/mp4">
 </video>
  </div>


</body>

</html>

Answer 3

与Tibbelit的联系最近。它不能在Chrome上运行，但似乎可以在其他浏览器上运行。

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

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

3 个答案:

视频文件阵列

演示