Question

我有10个YouTube链接，我希望能够按下一个按钮移动到下一个视频。

我的代码：

var videoLinks = ["https://www.youtube.com/embed/QIMo0jFbfQs",  "http://www.youtube.com/v/L8NGOUrw8UU"];
var v = 0;

$("#next").on('click', function(){
    next() + 1;

    function next(){
        if(v == videoLinks.length){ 
            //v = 0;
        }

        $(".content").html(" <iframe src= ' " + videoLinks[v]  + "'> "+ "</iframe>");    
    }
});

注意：我只包含2个测试链接。

Answer 1

您基本上需要一种方法来跟踪视频计数。本地存储对此有好处。该按钮将增加视频计数器并在您到达结束时重置该值。计数器将是对视频源值的引用。

使用简单的替换来更改视频源，嵌入视频，然后递增计数器。

可以在这里看到：https://jsbin.com/dehoxo/edit?html,js,console,output

$(document).ready(function(){

$('#nextBtn').click(function(e){
    e.preventDefault();
    alert();
    var vidIndex = parseInt(localStorage.getItem("vidIndex"));


    var vids = ['https://www.youtube.com/embed/VT4gri_n0iM', 
        'https://www.youtube.com/embed/DWooSca2rCw', 
       'https://www.youtube.com/embed/MukFRbS_5Gw'];

    var vidToken = '<iframe width="420" height="315" src="{{SRC}}" frameborder="0" allowfullscreen></iframe>';


    if (vidIndex) {
        if (vidIndex >= vids.length) {
            vidIndex = 0;
        }

    }
    else {
        if (!vidIndex && vidIndex !==0) {
            vidIndex = 0;
        }
    }

    var currentVid = vidToken.replace('{{SRC}}', vids[vidIndex]);
    $('#vidBox').html(currentVid);
    $('#vidIndex').val(vidIndex);
    vidIndex++;
    localStorage.setItem('vidIndex', vidIndex);
});

}）;

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <div id="vidBox">
        NO VID
    </div>
    <button id="nextBtn">Next Vid</button>
    <input id="vidIndex"/>
</body>
</html>

Answer 2

var videoLinks = [link1, link2, link3, ...];
var v = 0;

var iframe = $('iframe');
iframe.attr('src', videoLinks[0]);

$("#next").on('click', function(){
    v++;
    if(v >= videoLinks.length){
        v = 0;
    }

    iframe.attr('src', videoLinks[v]);
});

Answer 3

试试这个，它更简洁，更容易阅读：

var videoLinks = ["https://www.youtube.com/embed/QIMo0jFbfQs", "https://www.youtube.com/embed/L8NGOUrw8UU"];
var v = 0;

$("#next").on('click', function() {
  $(".content").html(" <iframe src= ' " + videoLinks[v] + "'> " + "</iframe>");
  v == videoLinks.length - 1 ? v = 0 : v++;
});

JSFiddle

Javascript中的动态视频测验

3 个答案: