使用 jquery 循环播放视频
Play the videos using jquery loops
我有一组视频 urls。
我使用 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。
我有一组视频 urls。
我使用 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。