Need to insert links in the url of the player that are updated every 9 seconds?

B

BlackReader2022-03-23 09:29:33

AJAX

BlackReader, 2022-03-23 09:29:33

here is the index html code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Страница с плеерами</title>

    <script src="jquery.min.js"></script>
    
      <script type="text/javascript">

        $("document").ready(function () {

            setInterval(function (){
                getNews();
            }, 9000);

            function getNews() {


            $.ajax({
                url: 'get.php',
                type: 'POST',
                success: function (data) {
                    alert(data);
                }
            });
        }
        });

    </script>
       

    <script src="https://softvelum.com/player/releases/sldp-v2.17.5.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90vh;
        }
        #start {
            width: 100%;
            height: 90vh;
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
        }
        .grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 840px;
        }
        .start-btn {
            margin: auto;
            font-size: 1rem;
            padding: 7px 12px;
        }
        .outer-wrp {
            display: flex;
            width: 400px;
            margin: 0 1rem 1rem 0;
        }
        .player-wrp {
            width: calc(100% - 60px);
            height: 200px;
        }
        .vu-meter-wrp {
            width: 60px;
            height: 200px;
        }
    </style>
</head>

<body>
<div id="content"></div>
<div class="content"></div>
<div id='start'>
    <button class='start-btn' onclick='startPlayers()'>Начать</button>
</div>
<div class='grid'>
    <div class='outer-wrp'>
        <div id="player-wrp-1" class='player-wrp'></div>
        <div id="vu-meter-1" class='vu-meter-wrp'></div>
    </div>
    <div class='outer-wrp'>
        <div id="player-wrp-2" class='player-wrp'></div>
        <div id="vu-meter-2" class='vu-meter-wrp'></div>
    </div>
    <div class='outer-wrp'>
        <div id="player-wrp-3" class='player-wrp'></div>
        <div id="vu-meter-3" class='vu-meter-wrp'></div>
    </div>
    <div class='outer-wrp'>
        <div id="player-wrp-4" class='player-wrp'></div>
        <div id="vu-meter-4" class='vu-meter-wrp'></div>
    </div>
</div>

<!-- Insert your SLDP streams URLs here -->
<script type="text/javascript">
    var sldpPlayers = [];
    var urls = [
        'сюда необходимо поставить сылки у которых токены обновляются каждые 9 секунд эти сылки исходят из get.php,
        'сюда необходимо поставить сылки у которых токены обновляются каждые 9 секунд',
        'сюда необходимо поставить сылки у которых токены обновляются каждые 9 секунд',
        'сюда необходимо поставить сылки у которых токены обновляются каждые 9 секунд'
    ];

    function startPlayers () {
        var button = document.getElementById('start');
        button.style.display = 'none';

        if ( sldpPlayers.length > 0 ) {
            restartPlayers();
        } else {
            doStart();
        }
    }

    function restartPlayers () {
        var destroyCnt = 0;
        for (var i = 0; i < sldpPlayers.length; i++) {
            sldpPlayers[i].destroy(function () {
                destroyCnt++;
                if (destroyCnt === sldpPlayers.length) {
                    sldpPlayers = [];
                    doStart();
                }
            });
        }
    }

    function doStart () {
        for (var i = 0; i < 4; i++) {
            var player = SLDP.init({
                container:          'player-wrp-' + (i + 1),
                stream_url:         urls[i],
                buffering:          800,
                autoplay:           true,
                muted:              true,
                height:             200,
                vu_meter:           {type: 'input', mode: 'peak', container: 'vu-meter-' + (i + 1), rate: 10},
            });
            sldpPlayers[i] = player;
        }
    }
</script>

</body>

</html>

Here is the get.php code from it, you need to somehow pull out these variables into the ajax script and insert them into the place where the links in the player, the variable is written like this, only the data changes https://132.128.1.132:8080/hls/lP09FvIy/master .m3u8

<?php

$urlinfo1 = 'https://132.128.1.132:8080/s/hls_api/get_video?channel=isfsfYwk&stream=main';
$urlinfo2 = 'https://132.128.1.132:8080/s/hls_api/get_video?channel=XsfsfsfGj&stream=main';
// get content
$info1 = file_get_contents($urlinfo1);
$info1 = json_decode($info1, true);
$result = $info1['hls'];



$info2 = file_get_contents($urlinfo2);
$info2 = json_decode($info2, true);
$result1 = $info2['hls'];

echo $result;
?>