Salut, ideea sta in felul urmator:
- vreau sa fac o pagina web cu un player html5, si rezultate din baza de date
- un buton de schimbare a videoclipului cu urmatorul, preluat din array JSON
- cand fisierul curent==ultimul, sa fac un GET si sa iau inca 50 sau 100 si sa repopulez json.
Asta e ceea ce-am lucrat pana acum, insa inainte vreau sa precizez ca nu cunosc foarte bine Javascript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The HTML5 Herald</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="../css/bystefu.v1.0.css?x=<?= rand() ?>">
</head>
<body>
<?php include("json.php"); ?>
<?php $url = "1.mp4"; ?>
<div class="container mt-50 mb-50 dark box-shadow text-center pt-50 pb-50">
<div class="row">
<div class="col-xs-12 col-lg-6">
<div class="embed-responsive embed-responsive-16by9">
<video poster="poster.jpg" data-id="1" id="videoclip" loop class="embed-responsive-item" controls>
<source src="<?php echo $url; ?>" type="video/mp4">
</video>
</div>
</div>
<div class="col-xs-12 col-lg-6">
<a id="buton" class="btn btn-danger">Schimba</a>
<div id="json" class="well mt-30">
<script>
for (var key in $rezultate) {
// document.write($rezultate[2]['link']); asta e doar de test, sa vad daca parcurgerea mea este buna
}
$("#buton").click(function () {
//sa facem get doar daca lista a ajuns la final, si sa mai punem inca cateva (50,100,etc)
$.getJSON("json.php?json=true", function (data) {
//cand e request GET cu JSON=true, imi da print la rezultate in format JSON
//alert(data[1]['id']); //doar de test
},false);
var $player = $("#videoclip");
var $melodie_curenta = $("#videoclip").attr("data-id");
//alert($melodie_curenta);
$("#videoclip").trigger('pause');
$idN = parseInt($melodie_curenta) + 1; //luam ID-ul next din JSON si schimbam datele
// alert($rezultate[$idN]['link']); ** doar de test
$("#videoclip source").attr('src', $rezultate[$idN]['url']);
$("#videoclip").attr("data-id", $idN);
$("#videoclip").trigger('load');
$("#videoclip").trigger('play');
});
</script>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Cumva am mers pe logica, dar nu cred ca logica mea a fost buna.
Am reusit sa parcurg lista de array si sa merg la urmatorul,insa cand lista se termina, ma blochez.Ma gandesc ca ar trebui cumva sa fac o variabila (temporara) cu acel array, si mai apoi sa o redefinesc cu noile date.Ma gandesc sa bag textul intr-un div cu display:none si apoi sa-l redefinesc cu $("#div").html(“json nou”);
Probabil ca exista o cale pentru asa ceva, dar nu cunosc eu.
Aici e array-ul din PHP.
$videos = array(
array(
"id" => 1,
"nume" => "Un titlu oarecare la fisierul 1",
"url" => "1.mp4",
),
array(
"id" => 2,
"nume" => "Un titlu oarecare la fisierul 2",
"url" => "2.mp4",
),
);
$rezultate = json_encode($videos, JSON_PRETTY_PRINT);
if (isset($_GET['json'])) {
print_r($rezultate);
}