切换视频源 - 同时在滑块上 - JS、HTML5 视频

Posted 2023-05-07

【中文标题】切换视频源 - 同时在滑块上 - JS、HTML5 视频

【英文标题】：Switch video source - same time on slider - JS, HTML5 Video

【发布时间】：2014-12-09 05:08:28

【问题描述】：

我有一个 JS 函数可以更改 html 视频的视频源。一个按钮激活此功能。它在开关上加载相同的新视频。有 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();
 

【问题讨论】：

使用此帖子设置上一个视频时间：***.com/questions/5981427/…。将您的来源保存在一个数组中，然后每次单击时计算一个索引。

有时间工作 -pastebin.com/gx5dYH3H 但现在需要让它来回切换视频源。

【参考方案1】：

这是解决你两个问题的小提琴，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);