使用按钮切换视频源

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>

使用按钮切换视频源

Switch video sources using button

html

javascript

css

button

html5-video