使用 javascript 在页面上播放随机视频答案

【问题标题】：Play random video on page with javascript使用 javascript 在页面上播放随机视频
【发布时间】：2019-10-08 01:53:12
【问题描述】：

我想在每次加载页面时随机显示三个视频。我有生成正确 URL 的基本代码，它使用 Google 开发工具在页面源中正确显示。但是，视频不会播放。如果我对 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>

【问题讨论】：

标签： javascript url video random append

【解决方案1】：

这适用于您描述的场景：

<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 之后运行（因此如果可以访问元素的属性），因此可以在页面上的元素之后内嵌，或者在加载的页面上触发的函数中运行活动
您引用的是 ID 为 videoposter 的元素，所以我直接且专门地访问了它
在你的脚本中你更新的是source.src而不是poster.src
controls、playslinline、loop、muted 等是二进制属性，因此如果存在它们则为真，如果不存在则为假。

【讨论】：

【解决方案2】：

另一种方法是在页面加载时动态创建<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>

【讨论】：