Commit 7235e387 authored by Alyx's avatar Alyx
Browse files

streaming

parent d9f85d69

.DS_Store

0 → 100644
+6 KiB

File added.

No diff preview for this file type.

View file

live.php

+97 −32
Original line number Diff line number Diff line
@@ -7,46 +7,111 @@ if (!preg_match("/^[a-zA-Z0-9]+$/", $key)) { 
    header('HTTP/1.1 400 Bad Request');

    die('Bad Request');

}





//    <title>alyx.tv — <?=htmlentities($key);</title>

//            hls.loadSource('');



?>

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <title>trichrome - <?= htmlentities($key); ?></title>



    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">

    <script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>

    <style>.container {

            padding: 4em;

        }



        html, body {

            background-color: #343a40;

            color: #fff;

            font-family: 'Courier New', monospace;

            font-weight: 500;

            height: 85vh;

            margin: 0;

        }



        .heightcontainer {

            height: 60vh;

        }



        .flex-center {

            align-items: center;

            display: flex;

            justify-content: center;

        }



        .position-ref {

            position: relative;

        }



        .top-right {

            position: absolute;

            right: 10px;

            top: 18px;

        }



        .content {

            text-align: center;

        }



        .title {

            font-size: 84px;

        }



        .subtitle {

            font-size: 42px;

        }



    <title>alyx.tv — <?=htmlentities($key);?></title>

        .m-b-md {

            margin-bottom: 30px;

        }

    </style>

</head>

<body>

<script src="/hls.js"></script>

<div class="container text-center">



    <h1 class="display-4">watching: <?=htmlentities($key);?></h1>

    <video height="600" id="video" controls></video>



    <script>

        if (Hls.isSupported()) {

            var video = document.getElementById('video');

            var hls = new Hls();

            hls.loadSource('<?=$url;?>');

            hls.attachMedia(video);

            hls.on(Hls.Events.MANIFEST_PARSED, function () {

                video.play();

            });

        }

            // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.

            // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.

        // This is using the built-in support of the plain video element, without using hls.js.

        else if (video.canPlayType('application/vnd.apple.mpegurl')) {

            video.src = '<?=$url;?>';

            video.addEventListener('canplay', function () {

                video.play();

            });

        }

    </script>

<div class="flex-center position-ref">

    <div class="content">

        <div>

            <h3><span style="color:red;">tri</span><span style="color:green;">chr</span><span

                        style="color:blue;">ome</span></h3>

        </div>

        <pre>watching: <?= htmlentities($key); ?></pre>

    </div>

</div>

<hr>

<div style="margin-left:auto;margin-right:auto;width:1280px;height:720px;">

    <video

            id="my-player"

            class="vjs-default-skin video-js vjs-live vjs-liveui"

            poster="/testcardemma.png"

            data-setup='{ "controls": true, "autoplay": true, "preload": "metadata","liveui":true }'

            width="960"

            height="540"

    >





        <p class="vjs-no-js">

            To view this video please enable JavaScript, and consider upgrading to a

            web browser that

            <a href="https://videojs.com/html5-video-support/" target="_blank">

                supports HTML5 video

            </a>

        </p>

    </video>

</div>



<script src="/js/jquery.min.js"></script>

<script src="/js/popper.min.js"></script>

<script src="/js/bootstrap.min.js"></script>

</body>

<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script>

    var player = videojs('my-player');

    player.src('<?=$url;?>');

</script>

</html>
 
 No newline at end of file

stream.html

+58 −2
Original line number Diff line number Diff line
@@ -8,11 +8,68 @@ 
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">

    <script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>

    <style>.container {

        padding: 4em;

    }



    html, body {

        background-color: #343a40;

        color: #fff;

        font-family: 'Courier New', monospace;

        font-weight: 500;

        height: 85vh;

        margin: 0;

    }



    .heightcontainer {

        height: 60vh;

    }



    .flex-center {

        align-items: center;

        display: flex;

        justify-content: center;

    }



    .position-ref {

        position: relative;

    }



    .top-right {

        position: absolute;

        right: 10px;

        top: 18px;

    }



    .content {

        text-align: center;

    }



    .title {

        font-size: 84px;

    }



    .subtitle {

        font-size: 42px;

    }



    .m-b-md {

        margin-bottom: 30px;

    }

    </style>

</head>

<body>







<div class="flex-center position-ref">

    <div class="content">

        <div>

            <h3><span style="color:red;">tri</span><span style="color:green;">chr</span><span

                    style="color:blue;">ome</span></h3>

        </div>

        <pre>watching: </pre>

    </div>

</div>

<video

        id="my-player"

        class="vjs-default-skin video-js vjs-live vjs-liveui"
@@ -33,7 +90,6 @@ 
</video>







</body>

<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>