使用按钮切换视频源答案

【问题标题】：Switch video sources using button使用按钮切换视频源
【发布时间】：2021-05-19 00:23:46
【问题描述】：

我想通过单击一个按钮（更改视频按钮）在同一个视频框中查看 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>

【问题讨论】：

标签： javascript html css button html5-video

【解决方案1】：

您当前的 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]
}

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案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>

【讨论】：