使用jquery循环播放视频

Play the videos using jquery loops

本文关键字：视频 播放 循环 jquery 使用      更新时间：2023-09-26

我有一个视频url数组。

我使用json将url从php传递给jquery。

脚本是这样的

$('.cnt_lsn').click(function(e){
    e.preventDefault();
    var video_dets = JSON.parse($(this).attr('data-video-det'));
    $.each(video_dets, function(i, v){
        console.log(i);  
        console.log(v.vid_url);
    });
});

所以价值就像一样

0
TW51XsixMqA
1
LxRiFFEXs5I

现在我该如何制作第一个视频播放&单击"下一步"按钮，将播放下一个url。我想要一些逻辑性的想法。

有人能帮忙吗？

实现这一点的一种方法是使用模运算符循环数组中的项。在你的情况下，它可以这样看：

var index = 0;
$('.cnt_lsn').click(function(e) {
    e.preventDefault();
    
    var video_dets = $(this).data('video-det'),
        currentVideo = video_dets[index];
    
    // Log current video URL and index
    $('#video').text(index + ': ' + currentVideo.vid_url);
    
    index = ++index % video_dets.length;
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="cnt_lsn" data-video-det='[{"vid_url": "TW51XsixMqA"}, {"vid_url": "LxRiFFEXs5I"}, {"vid_url": "HN318SixQqA"}]'>Play</button>
<div id="video"></div>

在上面的演示中，我只显示URL和视频索引，在您的情况下，您可能需要设置视频元素src，然后开始使用play方法。

顺便说一句，您可以使用$.fn.data方法读取数据属性，它也会自动为您解析JSON。

相关文章：