使用 JS 随机更改视频 - javascript

Question

我是新手，我想在加载网站时显示随机视频，我找到了这段代码，更改了一些东西并实现了我想要的，但现在我需要每个视频都有一个小描述和 link 我附上这张图片我想要类似的东西，这里有人可以帮助我吗，在此先感谢。

<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
  <source id="OracleVidSRC"/>
</video>

<script>
var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");
var oracleVidArray = [
  "http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4",
  "http://localhost/website/wp-content/uploads/2021/10/6b_xlarge_preview.mp4",
  "http://localhost/website/wp-content/uploads/2021/10/elementor1_xlarge_preview.mp4"
];


window.onload = function oracleFunction() {
  clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
  //video.style = "display: block";
  video.load();
}

</script>

你也可以在这里看到原始代码：

我只想在上面的js代码中包含这个，（每个视频都有不同的url和描述）

<figure class="wp-block-video">
     <a rel="noreferrer noopener" href="https://website.com" target="_blank">
          <video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
          </video>
     </a>
     <figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description 
          </span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a></figcaption>
</figure>

Answer 1

添加class“none”在：

<figure class="wp-block-video none">

编辑 css class:

.none { display:none; }

将带有“

<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
  <source id="OracleVidSRC"/>
</video>

<figure class="wp-block-video none">
 <a rel="noreferrer noopener" href="https://website.com" target="_blank">
      <video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
      </video>
 </a>
 <figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description 
      </span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a>

并在函数 oracleFunction() 中删除 class none.

使用 JS 随机更改视频 - javascript

Randomly changing video with JS - javascript

html

javascript

random

html5-video