动态视频测验在Javascript

Dynamic video Quiz in Javascript

本文关键字：Javascript 视频 动态      更新时间：2023-09-26

我有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 个用于测试的链接。

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

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

可以在这里看到：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);
});

}）;

该目录

<!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>

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]);
});

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

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

相关文章：