Javascript lista infinita de video

php7
json
html5
jquery
player
(Stefu Catalin) #1

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>

Si aici in PASTEBIN !

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);
}
(Stefu Catalin) #2

Inca ma intereseaza!

(Eduard-Dan Stanescu) #3

Foloseste un script de paginatie, iar in cazul in care articolul este ultimul de pe pagina, sa treaca la pagina urmatoare.
Sau poti sa incarci urmatoarele articole daca ai ajuns la penultimul, ca sa fie mai usor.

Articol-ul este video-ul in cazul tau. Bafta !