Question

我想通过单击按钮（更改视频按钮）在同一个视频框中查看 3 个不同的视频。一旦我到达第三个视频，然后按下按钮（更改视频按钮，应该再次播放第一个视频。有人可以帮我解决这个问题。提前致谢。附上代码

<button onclick="videoChanger()">Change Video</button>
<br>    
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" controls></video>

<script type="text/javascript">
    
    function videoChanger()
    {
        document.querySelector("video").src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4";
        document.querySelector("video").src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4";
    } //i tried this but this would change the video only once.
</script>

Answer 1

您可以尝试一种稍微不同的方法，即您拥有一个视频源数组和一个用于访问视频源数组中的项目的全局整数变量。每次单击按钮时该变量都会递增，如果超出数组长度则重置。

const path='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/';
const oVideo=document.querySelector("video");
const srcs=[
  path+'ForBiggerFun.mp4',
  path+'ForBiggerEscapes.mp4',
  oVideo.src
];

let i=0;

document.querySelector('button').addEventListener('click',function(e){
  if( i > srcs.length - 1 )i=0;
  let src=srcs[i];
  oVideo.src=src;
  i++;
});

<button>Change Video</button>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" controls></video>

Answer 2

您当前的 videoChanger 代码将立即将视频元素的 src 设置为第一个视频源，然后是第二个视频源。它在现实世界中不是特别灵活，但您可以使用递增值来选择您想要的流量控制或数组访问。

例如，使用数组：

let myIndex = 0
let videoPrefix = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/'
let myVideos = [
  'ForBiggerMeltdowns.mp4',
  'ForBiggerFun.mp4',
  'ForBiggerEscapes.mp4'
]

function videoChanger() {
  myIndex += 1
  if (myIndex >= myVideos.length)
    myIndex = 0
  document.querySelector("video").src = videoPrefix + myVideos[myIndex]
}

Answer 3

这一切都是用 vanilla JS 完成的。我添加到视频 html 中的只是一个自定义属性，它跟踪视频索引以随着时间的推移保持该属性。我们最初称之为设置第一个视频。

function videoChanger() {
    
    const path = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/"
    
    const videos = ["ForBiggerMeltdowns.mp4", "ForBiggerFun.mp4", "ForBiggerEscapes.mp4"]
    
    const idx = document.querySelector("video").getAttribute("data-index");
     
    document.querySelector("video").src=path+videos[idx];
         
    document.querySelector("video").setAttribute("data-index", (idx+1) % videos.length);  
}
  
videoChanger();

 <button onclick="videoChanger()">Change Video</button>
<video data-index=0></video>

使用按钮切换视频源

3 个答案: