<?php

class Page {

    public function header() {
        
    }

    public function meta(){
        echo '<link rel="stylesheet" href="https://cdn.cwinfo.net/frameworks/video-js/7.18.1/video-js.min.css" crossorigin="anonymous" media="screen">';
        echo '<script type="application/javascript" src="https://cdn.cwinfo.net/frameworks/video-js/7.18.1/video.min.js" crossorigin="anonymous"></script>';
    }

    public function style() {
        $scss = new ScssPhp\ScssPhp\Compiler();
        $file = __DIR__."/../../assets/css/player.scss";
        echo $scss->compile(file_get_contents($file));

echo "
main {
    align-items: center;
    justify-content: center;
    border-top: 0px;
}

main section#player {
    display: flex;
    justify-content: center;
}

main section#player .video-js {
    width: 75vmin !important;
}
";
    }

    public function content() {

echo '
<section id="player">
    <video class="video-js" controls autoplay muted preload="auto" poster="assets/images/stream-layout.png" data-setup=\'{}\'>
        <source src="https://rtmp.waren.io/play/hls/pf4c-bsma-6dgd-cx98/index.m3u8" type="application/x-mpegURL">
        <source src="https://rtmp.waren.io/play/dash/pf4c-bsma-6dgd-cx98/index.mpd" type="application/dash+xml">
        <!--<source src="https://icecast.waren.io/play/pf4c-bsma-6dgd-cx98.webm" type="video/webm">-->
    </video>
</section>
';


    }
}
  
?>