Como posso colocar uma opção de qualidades nesse player segue o codigo

[Danelelel 0]

Código php

 

<?php
error_reporting(0);
session_start();

include "gdrive/curl_gd.php";
require('profile.php');
require('../conexao/conexao.php');
$tokenC   = $_SESSION['token'];
$explod = explode('idMC', $tokenC);
$idCont = explode('id', $explod[0]);
$idConta = $idCont[1];
$idMembro = $explod[1];

$idM  = $idMembro;
$id   = mysqli_real_escape_string($conn, $_GET['id']);
$retry   = mysqli_real_escape_string($conn, $_GET['retry']);
$epid      = mysqli_real_escape_string($conn, $_GET['epid']);
$quality = mysqli_real_escape_string($conn, $_GET['quality']);

$vide = mysql_query("SELECT * FROM `vid_flix` WHERE id='$id'");
$vid  = mysql_fetch_assoc($vide);
if($vid['tipo'] == 2){
    if($quality == NULL or $quality == "medium"){
        $link = $vid['link'];
    }elseif($quality == "high"){
        $tokenC   = $_SESSION['token'];
        $explod = explode('idMC', $tokenC);
        $idCont = explode('id', $explod[0]);
        $idConta = $idCont[1];
        $idMembro = $explod[1];

        $cons = mysql_query("SELECT * FROM `login_flix` WHERE id='$idConta'");
        $consult = mysql_fetch_assoc($cons);
            $vip = $consult['vip'];
            if($quality == "high" && $vip == "1"){
                $link = $vid['link'];
            }else{
                $link = "No Permit";
            }
    }
    $titulo = $vid['titulo'];
    $bg     = $vid['bg'];
    $bg       = str_replace("w227_and_h127_bestv2", "original", $bg);
    $bg       = str_replace("w533_and_h300_bestv2", "original", $bg);
    $id = $vid['id'];
    $type=$vid['tipo'];
    $gdrive = $vid['gdrive'];

}
if($vid['tipo'] == 1){
    
    $video = mysql_query("SELECT * FROM `ep_flix` WHERE epId='$epid'") or die(mysql_error());
    $ep    = mysql_fetch_array($video) or die(mysql_error());
    
    $titulo      = $vid['titulo'].' : '.$ep['titulo'];
    $bg       = str_replace("w227_and_h127_bestv2", "original", $ep['img']);
    $bg       = str_replace("w533_and_h300_bestv2", "original", $ep['img']);
    $bg       = $bg;
    $dub       = $vid['leg_dub'];
    $service  = $vid['service'];
    
        $link     = $ep['link'];
   
    $gdrive = $ep['gdrive'];

    $id = $vid['id'];
    $type=$vid['tipo'];
    $epid = $epid;

    //PROXIMO EP//
     $epAt  = $ep['ep'];
     $tempAt = $ep['temp'];

     $nextEp = $epAt + 1;

    
    $p = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempAt' && ep='$nextEp'");
    $c1 = mysql_num_rows($p);
  
    if($c1 > 0){
        $epATT = mysql_fetch_assoc($p);
        $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;

    }elseif($c == 0){
        $tempNext = $tempAt + 1;
        $pp = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempNext' && ep='1'");
        $cc = mysql_num_rows($pp);
        if($cc > 0){
            $epATT = mysql_fetch_assoc($pp);
                $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
            
        }
    }

    //PROXIMO EP//

    $linkTest = $ep['link'];
    

}
   
$user = mysql_query("SELECT * FROM `perfil_flix` WHERE idMC ='$idMembro'");
$u = mysql_fetch_array($user);
$nome = $u['nome'];
$color = $u['color'];
$icon = $u['icon'];
if($gdrive == '1'){
        $url = $link;
        $gid = get_drive_id($url);
        
        $iframeid = my_simple_crypt($gid);

        $linkdown = Drive($url);
        $fileG = $iframeid;
        $link = $linkdown;
}
?>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/video-play.css">
<div class="chat hid">

    <div class="view">
    

    </div>
    <div class="text-chat">
        <input type="text" id="chat-value" class="chat-value" name="chat-value" placeholder="...">
        <button class="mic" id='mic'><i class="fas fa-microphone"></i></button>

    </div>
</div>
<div class="media"></div>
<?php
if($gdrive != 2){
if($link != "No Permit"){

?>

<script type="text/javascript">
    var vidLink     = "<?=$link?>";
    var titlevid     = "<?=$titulo?>";    
    var poster         = "<?=$bg?>";
    var nextEpp     = "<?=$proxEp?>";
</script>

<script src="flipclock/flipclock.js"></script>
<script src="js/play.js"></script>
<script type="text/javascript">
    
    var retryLoad =     setInterval(function(){
        var statusvid = vid.readyState;
         if(statusvid == '4'){
            var dura = vid.duration;
            var time = '<?=$retry?>'/100*dura;
            vid.currentTime = time;
            clearInterval(retryLoad);
        }
    },50);
    
            setInterval(function(){
        $.ajax({
          type: "POST",
          url: "../player/function/savep.php",
          data: {
              'idf' : "<?=$_GET['id']?>",
              'temp': progress,
              'idm' : '<?=$idM?>'

            },
          dataType: 'json',
          success: function (data) {
                    
                }

        });
            },10000);
</script>
<?php }else{
    ?>
    <script type="text/javascript">
        $('.media').html("<center style='color:white;'>Para ter acesso ao Recurso HD é necessario ser membro vip.</center>");
    </script>
    <?
} ?>

<script type="text/javascript">
    function nextEp(){
        $('.nextEp').click(function(){
            location.href="<?=$proxEp?>";
        });
        }
    setInterval(function(){
        $('.chat .view').load("chat-view.php?id=<?=$id?>");
    },500);

    $('.chat-value').on('keyup',function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
            if (code==13) {
                var msg = $(this).val();
                var user= "<?=$nome?>";
                var cor = "<?=$color?>";
                var icon= "<?=$icon?>";
                var id_vid= "<?=$id?>";    
                $.ajax({
                      type: "POST",
                      url: "cadXat.php",
                      data: {
                          'id_vid':id_vid,
                          'msg' : msg,
                          'user': user,
                          'cor' : cor,
                          'icon':icon

                        },
                      

                });
                $(this).val("");
            }
    });
    $('.smstext').click(function(){
        var hidC = $('.chat').hasClass("hid");
        if(hidC == true){
            $('.chat').removeClass("hid");
        }else if(hidC == false){
            $('.chat').addClass("hid");
        }
    });
    function toggleMute(element) {
    element.muted = false;
    element.play()
}

window.addEventListener('load', function () {
    setTimeout(function () {
        toggleMute(document.querySelector('video'));
    }, 1000);
});
</script>
<style type="text/css">
    .chat{
        height: calc(98vh - 12%);
    }
    @media screen and (max-width: 800px){
        .chat{
        height: calc(98vh - 22%);
    }
    }
    @media screen and (max-width:  500px){
        .chat{
            width: 60%;
        }
    }
    @media screen and (max-width:  350px){
        .chat{
            width: 70%;
        }
    }
</style>
<?php }else{
    ?>
    <script type="text/javascript">
        $('.media').html('<iframe src="<?=$link?>"></iframe>');
    </script>
    <style type="text/css">
        .media iframe{
            width: 100%;
            float: left;
            height: 100vh;
            border:transparent;
        }
    </style>
    <?
} ?>

 

Codigo arquivo js

 

    $('.media').append('<div class="play-video"></div>');
    $('.play-video').append('<div class="loading"></div>');
    $('.play-video').append('<div class="header"></div>');
    $('.header').append('<div class="info"><div>');
    $('.info').append('<div class="line-time"><div>');
    $('.line-time').append('<input type="range" class="line-control" min="0" max="100" value="0" onmousedown="line()" onclick="line()" onchange="line()">');
    $('.line-time').append('<div class="line-curren"></div>');
    $('.line-time').append('<div class="line"></div>');
    $('.line-time').append('<div class="line-time-slide"></div>');
    $('.info').append('<div class="time">0:00:00</div>');
    $('.info').append('<div class="controls-vid"></div>');
    $('.controls-vid').append('<button class="play_pause"><i class="material-icons">play_arrow</i></button>');
    $('.controls-vid').append('<button class="vol-slide"><i class="material-icons">volume_up</i></button>');
    $('.controls-vid').append('<button class="expand"><i class="material-icons">fullscreen</i></button>');
    
    $('.controls-vid').append('<span class="title-vid">'+titlevid+'</span>');
    $('.info').append('<div class="volup hid"><vid>');
    $('.volup').append('<input type="range" onkeyup="vol()" onmousedown="vol()" onclick="vol()" onchange="vol()" min="0" max="100" value="70" class="volups">');
    $('.volup').append('<div class="seta-baixo"></div>');
    $('.play-video').append('<div class="encript"></div>');
    $('.play-video').append('<div class="video-play"></div>');
    $('.header').append('<button class="playing-vid"><i class="material-icons">play_arrow</i></button>');    
    $('.video-play').append('<video id="vid-nf" poster="'+poster+'"></video>');
    $('#vid-nf').append('<source src="'+vidLink+'" type="video/mp4">');
    
    var vid = document.getElementById("vid-nf"); 
    function line(){
        var val =     $('.line-control').val();
        var durational = vid.duration;
        var por = val / 100 * durational;

        vid.currentTime=por;
    }

    $('.play_pause').click(function(){
        var play = $('.play_pause i').html();
        
        if(play == "play_arrow"){
            $('.play_pause i').html('pause');
            $('.playing-vid i').html('pause');
            vid.play();

        }if(play == "pause"){
            $('.play_pause i').html('play_arrow');
            $('.playing-vid i').html('play_arrow');
            vid.pause();
        }
    });
    $('.playing-vid').click(function(){
        var play = $('.play_pause i').html();
        
        if(play == "play_arrow"){
            $('.play_pause i').html('pause');
            $('.playing-vid i').html('pause');
            vid.play();

        }if(play == "pause"){
            $('.play_pause i').html('play_arrow');
            $('.playing-vid i').html('play_arrow');
            vid.pause();
        }
    });
    setInterval(function(){
        var statusvid = vid.readyState;
        if(statusvid == '0'){
            $('.loading').css('display','block');
        }else if(statusvid == '1'){
            $('.loading').css('display','none');
        }else if(statusvid == '2'){
            $('.loading').css('display','block');
        }else if(statusvid == '3'){
            $('.loading').css('display','none');
        }else if(statusvid == '4'){
            $('.loading').css('display','none');
        }
    },50);
    $('.expand').click(function(){
        var expand = $('.expand i').html();
        if(expand == 'fullscreen'){
            $('.expand i').html('fullscreen_exit');
            var el = document.documentElement
                , rfs = // for newer Webkit and Firefox
                       el.requestFullScreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                    || el.msRequestFullScreen
                ;
                if(typeof rfs!="undefined" && rfs){
                  rfs.call(el);
                } else if(typeof window.ActiveXObject!="undefined"){
                  // for Internet Explorer
                  var wscript = new ActiveXObject("WScript.Shell");
                  if (wscript!=null) {
                     wscript.SendKeys("{F11}");
                  }
                }
        }else{
            $('.expand i').html('fullscreen');
            if (document.cancelFullScreen) {  
              document.cancelFullScreen();  
            } else if (document.mozCancelFullScreen) {  
              document.mozCancelFullScreen();  
            } else if (document.webkitCancelFullScreen) {  
              document.webkitCancelFullScreen();  
            }
        }
    });
    $( document ).ready(function() {
         var regiao = document;
        var timeout = setTimeout(showTela, 4000);
        $(regiao).mousemove(onEvent);
        $(regiao).mousedown(onEvent);
        $(regiao).keydown(onEvent);

        function onEvent() {

          clearTimeout(timeout);
         
            $('body').css('cursor','auto');
          $('.header').css('opacity','1');
          timeout = setTimeout(showTela, 4000);
        }

        function showTela() {
          $('body').css('cursor','none');
          $('.header').css('opacity','0');
        }
      
       });
        $('.vol-slide').click(function(){
            var hid = $('.volup').hasClass('hid');
            if(hid == true){
                $('.volup').removeClass('hid');
                $('.line-time').addClass('hid');
                $('.time').addClass('hid');

            }else if(hid == false){
                $('.volup').addClass('hid');
                $('.line-time').removeClass('hid');
                $('.time').removeClass('hid');
            }
        });
        function vol(){
            var volu = $('.volups').val();
            var vol = volu / 100;
            if(volu < 50){
                $('.vol-slide i').html('volume_down');
            }
            else if(volu > 50){
                $('.vol-slide i').html('volume_up');
            }
            if(volu == 0){
                $('.vol-slide i').html('volume_off');
            }
            vid.volume = vol;

        };
        var progress = '';
        var per = '';
        var clo = '60';
        var clou = '';
        setInterval(function(){
            var current = vid.currentTime;
            var duration= vid.duration;
             per =  duration - current ;
            var percorid = current * 100;
             progress = percorid / duration;
            $('.line').css('margin-left', 'calc('+progress+'% - 8.5px)');
            $('.line-curren').css('width',progress+'%');
            
            var dur = String(duration);
            var perc = String(per);
            if(dur != 'NaN'){
                var date = new Date(null);
                date.setSeconds(perc); // specify value for SECONDS here
                var result = date.toISOString().substr(12, 7);
            $('.time').html(result);
            if(per < '30' && nextEpp != ''){
                if(clou == ''){
                    clou = '1';
                    $('.header').append('<button class="nextEp"><i class="material-icons">play_arrow</i><p>Próximo Episódio em</p><span class="restTime"></span></button>');
                    $('.info').addClass('hid');
                    $('.playing-vid').addClass('hid');
                    nextEp();
                }

            }
            }

        },50);
            var mytimer = setInterval(function(){
                if(per < '30' && nextEpp != ''){
                    $('.restTime').html(clo);
                    if(clo > 0){
                        clo --;
                    }else if(clo == 0){
                        location.href=nextEpp;
                        clearInterval(mytimer);
                    }
                }

                },1000);
        
        $('.settings').click(function(){
            var check = $('.settings').hasClass('active-s');

            if(check == true){
                $('.settings').removeClass('active-s');
                $('.line-time').fadeIn('slow').css('display','block');
                $('.time').fadeIn('slow').css('display','block');
                $('.quality').fadeOut('slow').css('display','none');
            }else if(check == false){
                $('.settings').addClass('active-s');
                $('.line-time').fadeOut('slow').css('display','none');
                $('.time').fadeOut('slow').css('display','none');
                $('.quality').fadeIn('slow').css('display','block');
            }
        });