Client side.
[sourcecode language="php"]
<?php require_once 'logic/controls.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head><link href="styles.css"></head>
<body>
<div class="currentSong">
<p id="title"><?php echo $videos[$_SESSION['i']]['title']; ?></p>
<div id="video" class="hidden">
http://www.youtube.com/embed/
</div>
</div>
<div class="controls">
<button class="prev">Prev</button>
<button class="stop">Stop</button>
<button class="play">Play</button>
<button class="next">Next</button>
</div>
<div class="playlist">
<ul>
<?php foreach ($videos as $i => $video) : ?>
<li class="track <?php if ($_SESSION['i'] == $i){echo 'active';}?>" id="row<?php echo $i; ?>">
<span class="trackNumber"><?php echo $i + 1; ?></span>
<span class="trackTitle"><?php echo $video['title']; ?></span>
<span class="trackTime"><?php echo $video['time']; ?></span>
</li>
<?php endforeach; ?>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function changeActive() {
$.get('logic/controls.php?getindex', function(data){
data = data.split(':');
$('li.active').removeClass('active');
$('li#row'+data[0]).addClass('active');
$('#title').html(data[1]);
});
}
function next() {
$('#video').html('');
$('#video').load('logic/controls.php?i=n' , function() {
changeActive();
});
}
function prev() {
$('#video').html('');
$('#video').load('logic/controls.php?i=p', function() {
changeActive();
});
}
function playtrack() {
$('#video').html('');
$('#video').load('logic/controls.php?i=c');
}
function stoptrack() {
$('#sontgtitle').html('');
$('#player').attr('src', '');
}
function trackByIndex(index) {
index = index.split('row')[1];
$('#video').html('');
$('#video').load('logic/controls.php?i='+index, function() {
changeActive();
});
}
$(function() {
$('.next').click(function(){next();});
$('.prev').click(function(){prev();});
$('.play').click(function(){playtrack();});
$('.stop').click(function(){stoptrack();});
$('.track').click(function(){trackByIndex($(this).attr('id'));});
});
</script>
</body>
</html>
[/sourcecode]
And on the server side for ajax calls
VIDEO should be a YouTube video id like 'cJkxyh8-KVU' TITLE is user defined, and TIME is the total seconds playtime.
[sourcecode language="php"]
<?php
session_start();
$videos = array(
array('title' => '<TITLE>', 'video' => '<VIDEO>', 'time' => '<TIME>'),
array('title' => '<TITLE>', 'video' => '<VIDEO>', 'time' => '<TIME>'),
array('title' => '<TITLE>', 'video' => '<VIDEO>', 'time' => '<TIME>'),
array('title' => '<TITLE>', 'video' => '<VIDEO>', 'time' => '<TIME>'),
array('title' => '<TITLE>', 'video' => '<VIDEO>', 'time' => '<TIME>')
);
if (!isset($_SESSION['i'])) $_SESSION['i'] = 0;
$count = count($videos) - 1;
$head = '';
if (isset($_GET['getindex'])) {echo $_SESSION['i'].':'.$videos[$_SESSION['i']]['title'];}
if (isset($_GET['i']) && ($_GET['i'] == 'p' || $_GET['i'] == 'n' || $_GET['i'] == 'c' || is_numeric($_GET['i']))) {
if ($_GET['i'] == 'p') {
if ($_SESSION['i'] == 0) {
$_SESSION['i'] = $count;
echo $head.$videos[$_SESSION['i']]['video'].$tail;
} else {
$_SESSION['i']--;
echo $head.$videos[$_SESSION['i']]['video'].$tail;
}
} elseif ($_GET['i'] == 'n') {
if ($_SESSION['i'] == $count) {
$_SESSION['i'] = 0;
echo $head.$videos[$_SESSION['i']]['video'].$tail;
} else {
$_SESSION['i']++;
echo $head.$videos[$_SESSION['i']]['video'].$tail;
}
} elseif ($_GET['i'] == 'c') {
echo $head.$videos[$_SESSION['i']]['video'].$tail;
}
if (is_numeric($_GET['i']) && $_GET['i'] <= $count) {
$_SESSION['i'] = $_GET['i'];
echo $head.$videos[$_SESSION['i']]['video'].$tail;
}
}
[/sourcecode]
And the end result with some styling care of briguy
Hi, Neat post. There's an issue with your site in internet explorer, could test this? IE nonetheless is the market chief and a huge component to folks will pass over your fantastic writing due to this problem.
ReplyDeleteI use Linux and despise IE. If I had my way I'd redirect all IE users to the most virus ridden page I could find.
ReplyDelete