Question

我想在每次加载页面时随机显示三个视频。我有生成正确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>

Answer 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中之后运行（以便可以访问元素的属性），因此可以在页面上的元素之后直接内联，也可以在加载页面时触发的函数中运行事件
您要使用videoposter ID引用元素，因此我直接且专门地访问了它
在脚本中，您正在更新source.src而不是poster.src
controls，playslinline，loop，muted等都是二进制属性，因此，如果存在则为true，否则为false。

Answer 2

一种替代方法是仅在页面加载时动态地创建一个m≰标签：

在空白文档中尝试此代码，看看是否想要？
（将相同的代码逻辑应用于您自己的代码）...

<video>

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

2 个答案: