Загрузить видео, переданное в URL по имени - PullRequest
Новая
       1

Загрузить видео, переданное в URL по имени

0 голосов
/ 10 января 2019

Я пытаюсь получить один из множества видеофайлов, находящихся на сервере, для воспроизведения на веб-странице с использованием 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>

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Массив видеофайлов

  1. Сначала вам нужно использовать MP4 , Ogg и / или WebM . Не используйте MOV (как упоминалось в вопросе). Если у вас есть Safari для воспроизведения MOV через тег <video>, это означает, что у вас есть плагин , который облегчает это:

    1. Никогда не предполагайте, что у пользователя есть плагин, и не предполагайте, что пользователь скачает и установит его, если это будет рекомендовано.
    2. Большинство стран мира используют ПК, а не Mac .

  2. Предполагая, что все видео находятся в одном месте (как было указано в вопросе), создайте массив их имен файлов: 

var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
  1. Далее сохраните ваш путь в переменной: 
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
  1. Объявите номер индекса и укажите тег <video>: 
var index = 0;
var player = document.querySelector('video');

  1. Обработка массива с помощью .map() и интерполяция каждого элемента массива с помощью base (см. function loadVideo() в демонстрационной версии).

  2. Если вы хотите воспроизводить файлы один за другим, не используйте атрибут [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>
0 голосов
/ 22 января 2019

Ответ от Тиббелита как ближайшего к рабочему. Он не работает в 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>
0 голосов
/ 10 января 2019 

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

Похоже, это то, чего мы хотим? =)

Example run ---

--- Старый

Вам необходимо установить правильный источник на элементе видео, т.е. 

<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()>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...