切换视频源-滑块上的同一时间-JS，HTML5视频

Switch video source - same time on slider - JS, HTML5 Video

本文关键字：视频 同一时间 -JS HTML5      更新时间：2023-09-26

我有一个JS函数，它可以更改HTML视频的视频源。按钮可激活此功能。它在交换机上加载相同的新视频。有两个相同长度的视频。

如何：

  1. 每次我点击按钮都要交换视频？

  2. 当我点击按钮时，视频可以在播放前一个视频的同时加载吗？

HTML:

<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls autoplay>
    <source id="mp4_src" src="video1.mp4" type="video/mp4">
    <source id="mp4_src" src="video2.mp4">
 </video>

JS-

var vid = document.getElementById("myVideo");
function myFunction() { 
    vid.src = "video2.mp4";
vid.load();
}

这是解决这两个问题的小提琴，http://jsfiddle.net/egjyd9rs/5/

基本上，兼顾两者的切换功能如下，

function myFunction() {
    currentlPlayingTime = vid.currentTime;
    if (currentlyPlaying === 1) {
        vid.src = src2;
        currentlyPlaying = 2;
        statusElement.innerText = 'Going to play video2..';
    } else {
        vid.src = src1;
        currentlyPlaying = 1;
        statusElement.innerText = 'Going to play video1..';
    }
    vid.load();
    vid.addEventListener('loadedmetadata', function () {
    vid.currentTime = currentlPlayingTime;
    }, false);
}
相关文章：