Question

我正在使用jquery和html5来显示视频播放列表。我想添加如果我的页面空闲20秒然后下一个视频源添加这是我的Html代码： -

    <html>
    <body>

    <figure id="video_player">
      <div id="video_container">
      <video controls poster="http://demosthenes.info/assets/images/vid-glacier.jpg">
        <source src="http://demosthenes.info/assets/videos/glacier.mp4" type="video/mp4">
        <source src="http://demosthenes.info/assets/videos/glacier.webm" type="video/webm">
    </video>
    </div>
    <figcaption>
      <a href="http://demosthenes.info/assets/videos/glacier.mp4" class="currentvid">
        <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
      </a>
      <a href="http://demosthenes.info/assets/videos/lake.mp4">
        <img src="http://demosthenes.info/assets/images/vid-lake.jpg" alt="Athabasca Lake">
      </a>
      <a href="http://demosthenes.info/assets/videos/mountain.mp4">
        <img src="http://demosthenes.info/assets/images/vid-mountain.jpg" alt="Mountain">
      </a>
    </figcaption>
    </figure>
    </body>

我的javacsript代码是： -

var video_player = document.getElementById("video_player");
    video = video_player.getElementsByTagName("video")[0],
    video_links = video_player.getElementsByTagName("figcaption")[0],
    source = video.getElementsByTagName("source"),
    link_list = [],
    vidDir = "http://demosthenes.info/assets/videos/",
    currentVid = 0,
    allLnks = video_links.children,
    lnkNum = allLnks.length;
    video.removeAttribute("controls");
    video.removeAttribute("poster");

    (function() {
    function playVid(index) {
     video_links.children[index].classList.add("currentvid");
        source[1].src = vidDir + link_list[index] + ".webm";  
        source[0].src = vidDir + link_list[index] + ".mp4";
        currentVid = index;
        video.load();
        video.play();
    }

    for (var i=0; i<lnkNum; i++) {
    var filename = allLnks[i].href;
    link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
    (function(index){
            allLnks[i].onclick = function(i){
            i.preventDefault();  
            for (var i=0; i<lnkNum; i++) {
            allLnks[i].classList.remove("currentvid");
            }
            playVid(index);
            }    
        })(i);
    }
    video.addEventListener('ended', function () {
        allLnks[currentVid].classList.remove("currentvid");
        if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
        playVid(nextVid);
    })

    video.addEventListener('mouseenter', function() {
        video.setAttribute("controls","true");
    })

    video.addEventListener('mouseleave', function() {
        video.removeAttribute("controls");
    })

    var indexOf = function(needle) {
        if(typeof Array.prototype.indexOf === 'function') {
            indexOf = Array.prototype.indexOf;
        } else {
            indexOf = function(needle) {
                var i = -1, index = -1;
                for(i = 0; i < this.length; i++) {
                    if(this[i] === needle) {
                        index = i;
                        break;
                    }}
                return index;
            };}
        return indexOf.call(this, needle);
    };
        var focusedLink = document.activeElement;
        index = indexOf.call(allLnks, focusedLink);

    document.addEventListener('keydown', function(e) {
    if (index) {
        var focusedElement = document.activeElement;
        if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
        var nextNode = focusedElement.nextElementSibling;
        if (nextNode) { nextNode.focus(); } else { video_links.firstElementChild.focus(); }
        }
       if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
        var previousNode = focusedElement.previousElementSibling;
        if (previousNode) { previousNode.focus(); } else { video_links.lastElementChild.focus(); }
        }
     }
    });
    var idleTime = 0;
    $(document).ready(function () {
        //Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 10000); // 1 minute
    console.log("ide..."+idleInterval);
        //Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });
    function timerIncrement() {
        idleTime = idleTime + 1;
        console.log("idleTime..."+idleTime);
       if(idleTime>=5){
        allLnks[currentVid].classList.remove("currentvid");


        if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
       // playVid(nextVid);


       }
    }
    })();

Answer 1

你可以尝试

var idleTime = 0;
$(document).ready(function () {
     //Increment the idle time counter every sec.
     var idleInterval = setInterval(timerIncrement, 1000); // 1 sec

     //Zero the idle timer on mouse movement or key press.
     $(this).mousemove(function (e) {
         idleTime = 0;
     });
     $(this).keypress(function (e) {
         idleTime = 0;
      });
});
function timerIncrement() {
      idleTime = idleTime + 1; //add 1 sec idleTime
      if (idleTime > 19 ) { // if greater than 20 sec
          //add you code where
          idleTime = 0; // reset idleTime to 0
      }
}

页面加载调用timeIncrement()函数每秒。每次调用idleTime函数时递增timeIncrement()个全局变量。如果idleTime大于19，则您加载另一个视频。

您可以根据需要每秒或每5秒或10秒致电timeIncrement()。但是你还需要在函数中增加idleTime。

希望这会对你有所帮助。

如果在播放列表

1 个答案: