Воспроизвести случайное видео на странице с помощью JavaScript - PullRequest
Новая
       51

Воспроизвести случайное видео на странице с помощью JavaScript

0 голосов
/ 21 мая 2019

У меня есть три видео, которые я хочу показывать в случайном порядке при каждой загрузке страницы. У меня есть основной код, который производит правильный URL, и он правильно отображается в исходном коде страницы с помощью инструментов Google dev. Тем не менее, видео не будет воспроизводиться. Если я жестко закодирую URL-адрес, видео воспроизводится нормально, так что почти как если бы код должен был добавить URL-адрес, прежде чем он запустит видео?

Вот что у меня есть: 

var poster = document.querySelector('#videoposter');
var number = Math.floor(Math.random() * 3) + 1;
source.src += number +'.mp4';
poster.poster += number +'.jpg';

<video preload="none" playsinline="" loop="" muted="" autoplay="" onplaying="this.controls=false;document.getElementById('vidOverlay').style.display = 'none';" poster="/images/media/Poster-" id="videoposter">
<source id="homevideo" src="/images/media/Video-" type="video/mp4">
</video>

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Альтернативой является просто динамическое создание тега <video> при загрузке страницы:

Попробуйте этот код в пустом документе и посмотрите, делает ли он то, что вам нужно?
(применить ту же логику кода к вашей собственной) ... 

<!DOCTYPE html>
<html>
<body>

<div> <a id="myVideoTag"> </a> </div>

<script>

//# generate random number
var number = Math.floor(Math.random() * 3) + 1;
var mySrc = "/images/media/Video-" + number + ".mp4";

//# create video element to append into above <a> tag           
tmpElement = document.createElement( "video");
tmpElement.setAttribute("controls", "true" );
tmpElement.setAttribute("width", "800");
tmpElement.setAttribute("src", mySrc);

//# append the dynamically created element...
var container = document.getElementById("myVideoTag");
container.appendChild(tmpElement);

</script>

</body>
</html>
0 голосов
/ 22 мая 2019

Это работает для сценария, который вы описываете: 

<video preload="none" controls playsinline loop muted poster="/images/media/Poster-" id="videoposter">
<source id="homevideo" src="/images/media/Video-" type="video/mp4">
</video>

<script>
var poster = document.getElementById('videoposter');
var number = Math.floor(Math.random() * 3) + 1;
poster.src += number +'.mp4';
poster.poster += number +'.jpg';
</script>

Изменения, которые я сделал:

  • скрипт должен запускаться после того, как элемент присутствует в DOM (такif может обращаться к свойствам элемента), поэтому либо внутри строки после элемента на странице, либо в функции, которая запускается при событии загрузки страницы
  • , вы ссылаетесь на элемент с помощью videoposterID, поэтому я обратился к нему напрямую и конкретно
  • в вашем скрипте, который вы обновляли source.src вместо poster.src
  • controls, playslinline, loop, mutedetc - это двоичные свойства, поэтому, если они присутствуют, они истинны, а если отсутствуют, они ложны.
...