Здравейте,
Моля ви имам един въпрос за audio/video в HTML5
как да направя да се зарежда следващата песен от playlist-a ?
ето и демо кадето можете да видите какво се получава
ето го playlista
а това е player-a
Моля ви имам един въпрос за audio/video в HTML5
как да направя да се зарежда следващата песен от playlist-a ?
ето и демо кадето можете да видите какво се получава
ето го playlista
Код:
<?php
$dir = 'Album1';
if(is_dir($dir)){
if($dd = opendir($dir)){
while (($f = readdir($dd)) !== false)
if($f != '.' && $f != '..'){
if(eregi(".mp3",$f))
$files[] = $f;
}
closedir($dd);
}
}
header("Content-type: text/javascript");
$file = array();
foreach($files as $key => $val){
$file[$key] = $val;
}
echo 'var obj = ' . json_encode($file) . ";\n";
?>
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = obj[(++i)%obj.length];
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}
$(document).ready(function(){
for(i in obj){
var text = document.createTextNode(obj[i]);
var list = document.getElementById('list');
var bullet = document.createElement('li');
var output = document.getElementById('output');
var path = "Album1/" + text.nodeValue;
bullet.innerHTML= "<a href='" + path + "' onclick='return false;'>" + text.nodeValue + "</a>";
list.appendChild(bullet);
output.appendChild(list);
}
$('#list > li a').live('click', function(e){
var t = e.target;
var $this = $(this);
var path = $this.attr('href');
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = path;
myVideo.load();
myVideo.play();
});
});
а това е player-a
Код:
<html>
<head>
<title>Player</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<video
controls
id="player"
poster="Album1/image.jpg"
height="170"
width="300"
type="video/mp4"></video>
<div id="output">
<ul id="list">
</ul>
</div>
<script type="text/javascript">
function doSomething1() {
$.get("playlist1.php");
return false;
}
</script>
<a href="#" onclick="doSomething1();">Album1</a>
<br>
<script type="text/javascript">
function doSomething2() {
$.get("playlist2.php");
return false;
}
</script>
<a href="#" onclick="doSomething2();">Album2</a>
<br>
<a href="#" onClick="window.location.reload()"> Clear </a>
</body>
</html>