Question

我一直在尝试建立一个播放随机.webm循环播放的网站，然后当您按一个键时，它将播放下一个随机.webm。我把随机部分记下来了，但是我似乎无法弄清楚如何让它等待按键。我遇到的另一个问题是，我无法弄清楚在首次访问该网站时如何使它加载随机的.webm。它只是播放第一个视频（1.webm），如果这是一个不好的问题，很抱歉，我是Web开发的新手。

我试图这样做，以便在按下键时可以加载新的.webm，但是它没有用。

这是我所拥有的： HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>webm haha</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>

  <body>
    <video controls loop id="video1" src="data/1.webm" autoplay></video>


    <script type="text/javascript" src="lib/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="lib/dat.gui.min.js"></script>
    <script type="text/javascript" src="app_nue.js"></script>
  </body>
</html>

JS：

var pGetRand;
var getRand;

//Settings
var settings = {
    changeThresh : 0.1,
    totalClips  : 7,
    pathToClips : "data/",
    pbRate : 1,
    mode : 'non-repeating-rand',

}

//Storage
var video1 = $('#video1');
var video2 = $('#video2');
var v1d,v2d,v1ct,v2ct;
var linearTracker = 1;
var gate1 = true;
var gate2 = false;



function toggle(element, pElement){
    //start playing before the clip comes to the front.
    element.get(0).play();

    setTimeout(function(){
        element.css('z-index', '500');
        pElement.css('z-index', '0');
        if(settings.mode == 'random'){
            getRand = Math.floor(  Math.random() * settings.totalClips +1  )
        }

        if(settings.mode == 'linear'){
            if(linearTracker >= settings.totalClips){
                linearTracker = 1;
            }else{
                linearTracker ++
            }

            getRand = linearTracker
            console.log(linearTracker);
        }

        if(settings.mode == 'non-repeating-rand'){
            getRand = Math.floor(  Math.random() * settings.totalClips +1  )
            while(getRand == pGetRand){ //are we the same, if so try again until we are not.
                console.log("try again",getRand,pGetRand);
                getRand = Math.floor(  Math.random() * settings.totalClips +1  )
            }
            pGetRand = getRand
        }

        pElement.attr({ 'src': settings.pathToClips + getRand + '.webm' });
        pElement.get(0).pause();
    }, 150)


}

Answer 1

有关按键等待问题，您可以访问this网页。
有关随机问题，您可以访问this网页。

Answer 2

首先，您可以使用window.addEventListener在按键上运行功能。这里的参数key具有一个属性，该属性表示所按下键的ID号。您可以更改该数字以更改更改视频所需按的键。您可以在here

上阅读更多内容

window.addEventListener('keypress', function(key) {
   //32 is the space key, use console.log(key.which)
   to figure out the id for the key you want to use

   if (key.which == 32) {
       toggle();
   }
});

在整体功能中，您应该仅更改视频的src，而不是隐藏和显示全新的元素。在功能开始时，您只需添加以下内容：

    var element = document.getElementById("video1");
    var vid = '1';//Backup

在切换功能结束时，您将重置时间并更改src：

    element.play();
    element.currentTime = 0;
    element.setAttribute('src', settings.pathToClips+vid+'.webm');

对于您的随机功能，您可能不希望重复播放最后播放的视频，因此，您应使用filter检查新视频ID是否与最近播放的视频相同。
您可以了解有关过滤器here

的更多信息

if (settings.mode == 'random') {
    function getNewNumber() {
        var lastVid = usedVids[usedVids.length-1];
        if (lastVid == undefined || isNaN(lastVid)) {
            lastVid = settings.totalClips+1;
            //Makes sure there is no way the new vid could be the same
        }
        var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
        var isUsed = usedVids.filter(a => a == vidNum);
        //This makes sure that the video isn't the same as the last video (It helps make it seem more random)
        if (isUsed[0] != lastVid) {
            vid = vidNum;
            usedVids = [vidNum];
        }
        else {
            getNewNumber();
        }
    }
    getNewNumber();
}

对于线性，您只需为您所在的vid增加变量，然后将视频编号设置为该变量即可。

    if (settings.mode == 'linear') {
        currentVidNum++;
        if (currentVidNum > settings.totalClips) {
            //This resets currentVidNum once it is at the max vids
            currentVidNum = 1;
        }
        vid = currentVidNum;
    }

非重复随机性有点棘手，但您可以使用与随机性类似的技术来实现，除非您不必在每次更新视频时都从播放的数组中删除所有值：

    if (settings.mode == 'non-repeating-rand') {
        var wasReset = false;
        if (usedVids.length >= settings.totalClips) {
            //This resets usedVids while still keeping the last video used so it won't play it again
            var lastVid = usedVids[usedVids.length-1];
            wasReset = true;
            usedVids = [lastVid];
        }

        function getNewNumber() {
            var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
            var isUsed = usedVids.filter(a => a == newVidNum);
            if (isUsed[0] != newVidNum) {
                if (wasReset == true) {
                    usedVids = [];
                }
                usedVids.push(newVidNum);
                vid = newVidNum;
            }
            else {
                getNewNumber();
            }
        }
        getNewNumber();
    }

要解决您的问题，即它不会自动设置随机视频，您只需要在脚本结尾处调用切换功能即可。
我不知道这是否足够好解释，因此是否有帮助，请看下面的完整代码片段：（尽管除非您有视频：/），否则它将不起作用

window.addEventListener('keydown', function(key) {
  if (key.which == 32) {
    toggleVid();
  }
});

//Settings
var settings = {
  changeThresh: 0.1,
  totalClips: 6,
  pathToClips: "data/",
  pbRate: 1,
  mode: 'non-repeating-rand',
}
var currentVidNum = 1;
var usedVids = []; //Used for non-repeating-rand and random

function toggleVid() {
  var element = document.getElementById("video1");
  var vid = '1'; //Backup
  if (settings.mode == 'random') {
    function getNewNumber() {
      var lastVid = usedVids[usedVids.length - 1];
      if (lastVid == undefined || isNaN(lastVid)) {
        lastVid = settings.totalClips + 1;
        //Makes sure there is no way the new vid could be the same
      }
      var vidNum = Math.floor(Math.random() * settings.totalClips) + 1;
      var isUsed = usedVids.filter(a => a == vidNum);
      //This makes sure that the video isn't the same as the last video (It helps make it seem more random)
      if (isUsed[0] != lastVid) {
        vid = vidNum;
        usedVids = [vidNum];
      } else {
        getNewNumber();
      }
    }
    getNewNumber();
  }

  if (settings.mode == 'linear') {
    currentVidNum++;
    if (currentVidNum > settings.totalClips) {
      currentVidNum = 1;
    }
    vid = currentVidNum;
  }
  if (settings.mode == 'non-repeating-rand') {
    var wasReset = false;
    if (usedVids.length >= settings.totalClips) {
      var lastVid = usedVids[usedVids.length - 1];
      wasReset = true;
      usedVids = [lastVid];
    }

    function getNewNumber() {
      var newVidNum = Math.floor(Math.random() * settings.totalClips) + 1;
      var isUsed = usedVids.filter(a => a == newVidNum);
      if (isUsed[0] != newVidNum) {
        if (wasReset == true) {
          usedVids = [];
        }
        usedVids.push(newVidNum);
        vid = newVidNum;
      } else {
        getNewNumber();
      }
    }
    getNewNumber();
  }
  element.play();
  element.currentTime = 0;
  element.setAttribute('src', settings.pathToClips + vid + '.webm');
}

<video controls loop id="video1" src="data/1.webm" autoplay='true'></video>

有没有办法跳过当前正在播放的视频（带有按键）并继续播放下一个视频？

2 个答案: