RaGo

VIDEO PLAYER JS PHP CSS

Programming/WEB2018. 5. 8. 23:19

player.php

<?php
  session_start();
  setlocale(LC_ALL,'ko_KR.UTF-8');
  $today = date("ymdHis",strtotime("+30 minute"));
  $uid = $_SESSION["member_id"];
  $mp4path = $_GET["src"];
  $smipath = str_replace('.mp4', '.smi',$mp4path);
  //자막 체크 및 인코딩 검사
  if (is_file($smipath)) {
    $fp = fopen($smipath,"r");
    $data = fread($fp,filesize($smipath)+1);
    $datechar = mb_detect_encoding($data ,"EUC-KR, UTF-8 , ASCII");
    if($datechar=='') $datechar='UTF-16';
    $data = iconv($datechar , "UTF-8", $data);
  }

  //다음 파일 체크
  $end = strripos($mp4path, "/");
  $dirpath = substr($mp4path , 0 , $end);
  $filename = substr($mp4path , $end+1 , strlen($mp4path));
  $file = scandir($dirpath);
  $find = false;
  for ($i=2; $i < count($file) ; $i++) {
    $nextsrc = $dirpath.'/'.$file[$i];
    if($find == true && pathinfo($nextsrc)['extension']=='mp4') break;
    if($filename == $file[$i]) $find = true;
    if($i==count($file)-1) $nextsrc="";
  }

  //최근 재생파일 체크
  $fileurl = "userdata/".$uid.".txt";
  $fp = fopen($fileurl,"r");
  $userdata = fread($fp,filesize($fileurl)+1);
  if($userdata==""){
    $userdata = $dirpath."=".$filename;
  }
  else{
    $userdata = explode("\n",$userdata);
    for ($i=0; $i <count($userdata) ; $i++) {
      if(explode('=',$userdata[$i])[0]==$dirpath) {
        $userdata[$i] = $dirpath."=".$filename;
        break;
      }
      if($i==count($userdata)-1){
        $userdata[count($userdata)] = $dirpath."=".$filename;
        break;
      }
    }
    $userdata = implode("\n",$userdata);
  }
  fclose($fp);
  $fp = fopen($fileurl,"w");
  fputs($fp, $userdata);
  fclose($fp);
  //최근파일 DB에 저장
  $con = mysqli_connect("localhost", "", "", "");  //DB연결
  mysqli_query($con, "set session character_set_connection=utf8;");
  mysqli_query($con, "set session character_set_results=utf8;");
  mysqli_query($con, "set session character_set_client=utf8;");
  $sql = "select * from watch where id = '$uid' and path = '$dirpath'";
  $result = mysqli_query($con,$sql) or die(mysql_error());    //데이터를 찾아서
  $count = mysqli_num_rows($result);   //몇개의 데이터가 반환되었는지 확인
  if($count){
    $sql = "select time from watch where id = '$uid' and path = '$dirpath' and title = '$filename'";
    $videotime = mysqli_query($con,$sql) or die(mysql_error()); //데이터를 찾아서
    $videotime = mysqli_fetch_array($videotime)[0];
    $sql = "update watch set title='$filename' where id='$uid' and path='$dirpath'";
    $result = mysqli_query($con,$sql) or die(mysql_error());
  }
  else{
    $sql = "insert into watch values('$uid','$dirpath','$filename',0,0)";
    $result = mysqli_query($con,$sql) or die(mysql_error());
    $videotime = 0;
  }

  $knowfilename = substr($filename , 0 , strlen($filename)-4)
?>

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="LEE_SunRyong">
    <meta charset="utf-8">
    <?php
    $arr_browser = array ("iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC");
    for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {
      if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true)
      echo "<meta name=\"viewport\" content=\"width=320, user-scalable=yes\">";
    }
    ?>
    <link rel='stylesheet' href='css/play.css'>
    <script src="js\jquery-3.2.1.min.js"></script>
    <script><?php print("var time=".$today); ?></script>
    <script src='js/play.js'></script>
    <script src='js/chat.js'></script>
    <title>ALPAKA_PLAYER_<?php print($knowfilename); ?></title>
  </head>
  <body>
    <div style="display:none" id="infos">
      <p id="dirpath"><?php print($dirpath) ?></p>
      <p id="id"><?php print($uid) ?></p>
      <p id="filename"><?php print($knowfilename) ?></p>
    </div>
    <?php
    $start = 0;
    $index = substr_count(strtoupper($data), "<SYNC START");
    echo "<textarea id=\"smi\" style=\"display:none\">";
    for ($i=0; $i < $index; $i++) {
      $start = stripos($data, "<SYNC START=",$start)+12;
      $end = stripos($data, ">",$start);
      $time = substr($data , $start , $end-$start);
      $end = stripos($data, ">",$end+1);
      $start = $end+1;
      $end = stripos($data, "<SYNC",$start);
      if($end=='') $end = stripos($data, "</BODY>",$start);
      $text = substr($data , $start , $end-$start);
      echo "$time!$$text||";
    }
    echo "</textarea>";
    ?>

    <!--자막 데이터를 처리합니다-->
    <script>
      var smi = document.getElementById("smi").innerHTML;
      smi = smi.split("||");
      for (var i = 0; i < smi.length; i++) smi[i] = smi[i].split("!$");
    </script>


    <div id='screen'>

      <div id='track'></div>
      <video id='video' style='width:100%;' onended="nextfile(<?php echo "'$nextsrc'"; ?>);" onplay="setPlayicon();" onpause="setPlayicon();" onclick="videoplay();" onloadeddata="screenPosition();timeset();setSoundbar();<?php echo "replayask('$videotime');"; ?>" onvolumechange="setSoundbar();" ontimeupdate="smiUpdate(); timebarupdate(); timeupdate(); dbupdate(<?php echo"'$dirpath','$filename'"?>)" src="<?php print($mp4path); ?>" autoplay></video>

      <!--컨트롤버튼 입니다-->
      <div id="controls">
        <span id="playtime">00:00</span>
        <span id="maxtime">00:00</span>
        <div id="timebar" onclick="timemove()"><div id="timebar_full"></div></div>
        <img id="play" src="image/playicon.png" alt="플레이" onclick="videoplay()">
        <img id="sound" src="image/soundicon.png" alt="사운드" onclick="muteunmute()">
        <input id="soundbar" type="range" onchange="soundupdate()">
        <img id="chatbutton" src="image/chaticon.png" alt="채팅">
        <img id="episode" onclick="location.href='episode.php?path=<?php echo "$dirpath'"; ?>" src="image/listicon.png" alt="리스트">
        <img id="full" src="image/fullicon.png" onclick="full()" alt="풀스크린">
      </div>
      <input id="chatwrite_input" style="display:none;" type="text" name="" value="" placeholder="전송하려면 <ENTER>를 누르세요">
      <div id="chatview"></div>
    </div>
  </body>
</html>

play.js
var timer = null;
var volumetemp = 0;

//비디오 및 자막 위치 조정
function screenPosition(){
  var myscreen = document.getElementById("screen");
  var minwidth = (video.videoWidth / video.videoHeight) * window.innerHeight;
  var minheight = (video.videoHeight / video.videoWidth) * window.innerWidth;
  var topmargin = (window.innerHeight-minheight) / 2;
  if(minwidth<=window.innerWidth){
    myscreen.style.width = minwidth +"px";
    myscreen.style.margin = "0px auto";
    myscreen.style.height = window.innerHeight+"px";
    var tracktarget = document.getElementById("track");
    var subwidth = minwidth/30;
    tracktarget.style.fontSize=subwidth+"px";
    tracktarget.style.marginBottom=subwidth+"px";
  }
  else{
    myscreen.style.width = "100%";
    myscreen.style.height = minheight+"px";
    myscreen.style.margin = topmargin+"px 0px";
    var tracktarget = document.getElementById("track");
    var subwidth = window.innerWidth/30;
    tracktarget.style.fontSize=subwidth+"px";
    tracktarget.style.marginBottom=subwidth+"px";
  }
}

//자막 업데이트
function smiUpdate(){
  var nowtime = parseInt(video.currentTime*1000);
  var track = document.getElementById("track");
  var tracksmi = document.getElementById("smi");
  if(tracksmi.innerHTML!=''){
    for (var i = 0; i < smi.length; i++) {
      var time = parseInt(smi[i][0]);
      var nextarr = i+1==smi.length?'false':i+1;
      if(nextarr!='false') var nexttime = parseInt(smi[nextarr][0]);
      if(time<=nowtime&&nexttime>=nowtime){
        if(smi[i][1]!=null){
          smi[i][1] = smi[i][1].replace(/&lt;/gi,"<");
          smi[i][1] = smi[i][1].replace(/&gt;/gi,">");
          smi[i][1] = smi[i][1].replace("&nbsp;"," ");
        }
        else smi[i][1]='';
        track.innerHTML=smi[i][1];
      }
    }
  }
}

function dbupdate(filedir,filename){
  $(document).ready(function(){
    $.post("dbupdate.php",{'filedir':filedir,'filename':filename,'time':video.currentTime},function(data){
    });
  });
}

function replayask(time){
  if(time) var ans = confirm(parseInt((time/60))+"분"+parseInt((time%60))+"초 까지 시청하셨습니다\n이어서 보시겠습니까?");
  if(ans) video.currentTime=time;
}

//비디오시간 텍스트 업데이트 및 셋
function timeset(){
  var maxtime = document.getElementById("maxtime");
  var min = parseInt(video.duration/60);
  var sec = parseInt(video.duration%60);
  if(min<10) min = "0"+min;
  if(sec<10) sec = "0"+sec;
  maxtime.innerHTML=min+":"+sec;
}

function timeupdate(){
  var playtime = document.getElementById("playtime");
  var min = parseInt(video.currentTime/60);
  var sec = parseInt(video.currentTime%60);
  if(min<10) min = "0"+min;
  if(sec<10) sec = "0"+sec;
  playtime.innerHTML=min+":"+sec;
}

//비디오타임바 업데이트 및 셋 및 이동
function timebarset(){
  var timebar = document.getElementById("timebar");
  var w = window.innerWidth-20;
  timebar.style.width=w+"px";
}

function timebarupdate(){
  var timebar = document.getElementById("timebar_full");
  var timepersent = video.currentTime / video.duration * 100;
  timebar.style.width=timepersent+"%";
}

function timemove(e){
 var timebarwidth = event.offsetX/parseInt(document.getElementById("timebar").style.width);
 var movetime = video.duration*timebarwidth;
 video.currentTime = movetime;
}

//비디오 정지 & 플레이
function videoplay(){
  if (video.paused) video.play();
  else video.pause();
}

//정지 & 플레이 아이콘 업데이트
function setPlayicon(){
  var playicon = document.getElementById("play");
  if (video.paused) playicon.src="image/playicon.png";
  else playicon.src="image/pauseicon.png";
}

//사운드바 관련
function soundupdate(){
  var soundbar = document.getElementById("soundbar");
  video.volume=soundbar.value/100;
}

function setSoundbar(){
  var soundbar = document.getElementById("soundbar");
  var soundicon = document.getElementById("sound");
  soundbar.value=video.volume*100;
  if(soundbar.value==0) soundicon.src="image/soundmuteicon.png";
  else soundicon.src="image/soundicon.png";
}

function muteunmute(){
  if(video.volume>0) volumetemp=0;
  var temp = video.volume;
  video.volume = volumetemp;
  volumetemp = temp;
}

//풀스크린
function full(){
  var docEl = document.body;
  var full = document.getElementById("full");
  if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if(docEl.requestFullScreen) docEl.requestFullScreen();
    else if(docEl.webkitRequestFullScreen) docEl.webkitRequestFullScreen();
    else if(docEl.mozRequestFullScreen) docEl.mozRequestFullScreen();
    else if (docEl.msRequestFullscreen) docEl.msRequestFullscreen();
    full.src="image/halficon.png";
    screenPosition();
  }
  else {
    if(document.exitFullscreen) document.exitFullscreen();
    else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if(document.webkitExitFullscreen) document.webkitExitFullscreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();
    full.src="image/fullicon.png";
    screenPosition();
  }
}

//컨트롤창 타임아웃
function controlsover(){
  var controls = document.getElementById("controls");
  controls.style.display="none";
  document.body.style.cursor="none";
}

window.onmousemove=function(){
  var controls = document.getElementById("controls");
  controls.style.display="block";
  document.body.style.cursor="default";
  clearTimeout(timer);
  timer = setTimeout("controlsover()",2000);
}

//다음파일 재생
function nextfile(src){
  if(src=='') alert("마지막 영상입니다.");
  else location.href='play.php?src='+src;
}

window.onresize=function(){
  screenPosition();
  timebarset();
}

window.onload=function(){
  timebarset();
}

window.onkeydown=function(){
  var chatwrite_input = document.getElementById("chatwrite_input");
  if(document.activeElement!=chatwrite_input){
    var getkey = event.keyCode;

    //방향키 좌
    if(getkey==37) {
      video.currentTime -=5;
      return false;
    }

    //방향키 우
    if(getkey==39) {
      video.currentTime +=5;
      return false;
    }

    //방향키 아래
    if(getkey==40) {
      var vol = video.volume;
      vol -= 0.1;
      if(vol<0) vol=0;
      video.volume = vol;
      return false;
    }

    //방향키 위
    if(getkey==38) {
      var vol = video.volume;
      vol += 0.1;
      if(vol>1) vol=1;
      video.volume = vol;
      return false;
    }

    //스페이스바
    if(getkey==32) {
      videoplay();
      return false;
    }
  }
}


play.css

@font-face {
  font-family: 'deffont';
  src: url("../font/webisfree.ttf");
}
body{
  margin: 0px;
  padding: 0px;
  background-color: black;
  overflow: hidden;
  font-family: 'deffont','맑은고딕';
}
#screen{
  background-image: url("../image/screen.png");
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  position: relative;
}

#track{
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  text-align:center;
  font-weight: bold;
  text-shadow: 0px 0px 2px black,0px 0px 2px black,0px 0px 2px black,0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
}

#controls{
  display: none;
  position: fixed;
  bottom: 0px;
  background:linear-gradient(to bottom, transparent, black);
  width: 100%;
  height: 62px;
}

#controls img{
  width: 32px;
  height: 32px;
}

#controls *:hover{
  cursor: pointer;
}

#playtime{
  font-size: 14px;
  color : white;
  position: fixed;
  bottom: 57px;
  left: 10px;
  text-shadow: 0px 0px 2px black,0px 0px 2px black;
}

#maxtime{
  font-size: 14px;
  color : white;
  position: fixed;
  bottom: 57px;
  right: 10px;
  text-shadow: 0px 0px 2px black,0px 0px 2px black;
}

#full{
  position: fixed;
  bottom: 10px;
  right: 10px;
}

#episode{
  position: fixed;
  bottom: 10px;
  right: 94px;
}

#play{
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#sound{
  position: fixed;
  bottom: 10px;
  left: 52px;
}

#timebar{
  width: 100%;
  height: 8px;
  cursor: pointer;
  position: fixed;
  bottom: 47px;
  left: 10px;
  background-color: white;
}

#timebar_full{
  width: 10%;
  height: 8px;
  background-color: skyblue;
}

#soundbar{
  margin: 0px;
  padding: 0px;
  width: 100px;
  height: 32px;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 94px;
}

#chatview{
  font-weight: bold;
  position: absolute;
  padding: 2px;
  top: 10px;
  right: 20px;
  width: 200px;
}

#chatview p{
  color: white;
  margin: 2px 0px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

#chatview span{
  margin-right: 5px;
  color: blue;
}

#chatview img{
  width: 100%;
}

#chatbutton{
  margin: 0px;
  padding: 0px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 52px;
}

#chatwrite_input{
  border: 1px solid black;
  border-radius: 40px 40px 0px 40px;
  position: fixed;
  padding: 0px 5px;
  bottom: 62px;
  right: 68px;
  width: 200px;
  height: 20px;
  background-color: white;
}



저작자표시 비영리 변경금지

'Programming > WEB' 카테고리의 다른 글

[PHP] SMI 파일형식의 자막을 JSON으로 내보내기  (1) 2018.07.20

티스토리툴바