HTML5 nepareizi reģistrē video garumu

Februāris 11, 2012

Nepieciešama palīdzība pie viena, neliela video pleijera.

Problēmas sakne tāda, ka, ielādējot video, no POST'a urļ'a, Javaskripts nespēj detektēt pareizi video garumu (duration). Lapu pārlādējot, pirmo reizi, video garums tiek detektēts pareizi, un pleijeris strādā, kā tam pienākas būt.

Konkrētu gadījumu izķert ir grūti. Čerez Opera Dragonfly, skripta kļūdas parādās tikai gadījumos, kad video garums nav definēts, pārējos gadījumos viss strādā pareizi.

Lapas kods, kas čakarē man mozgu:

<?php
$url = $_POST['videoId'];
?>

<html>
<head>
 <link href="css/player.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.js"></script>
</head>
<body>
 <div id="player" onmousemove="modifyTimeout()">
  <video id="myVideo" src="<?php echo ($url);?>"
type='video/ogg; codecs="theora, vorbis"' autobuffer="true" preload="metadata"
width="1920" height="1080" onclick="showControls()">
  </video>
  <div id="container">
<img src="images/player_ikonas/pamats.png" />
<img id="valodas" src="images/player_ikonas/language.png" onClick="window.open('index.php','_self')" />
<img id="play" src="images/player_ikonas/play.png" />
<img id="pause" src="images/player_ikonas/pause.png" onClick="playOrPause()" />
<img id="timeline_back" src="images/player_ikonas/timeline_background.png" />
<img id="timeline_active" src="images/player_ikonas/timeline_active.png"/>
<div id="progress_container">
 <img id="progress" src="images/player_ikonas/progress.png"/>
</div>
<img id="timeline_active2" src="images/player_ikonas/timeline_active.png" onclick="getDetails(this)"/>
<img id="grupas" src="images/player_ikonas/video.png" onClick="window.open('lv.php','_self')" />
  </div>
 </div>
 <script>
  $(document).ready(function() {
playOrPause();
});
  var timer;
  var timer_activated = false;
  var width_total = 564;
  var visible = false;
  var video = document.getElementsByTagName('video')[0];
  var seekbar = document.getElementById("progress_container");

  function showControls(){
var konteiners = document.getElementById("container");
konteiners.style.display = "block";
visible = true;
startTimer();
}

  function modifyTimeout(){
if (timer_activated){
 clearTimeout(timer);
 timer_activated = false;
 startTimer();
 }
}
  function startTimer(){
if (!timer_activated){
 var timePeriodInMs = 7000;
 timer_activated = true;
 timer = setTimeout(function(){
  document.getElementById("container").style.display = "none";
  visible = false;
  }, timePeriodInMs);
 }
}
  function playOrPause() {
updateUI();
if (video.ended || video.paused) {
 video.play();
 document.getElementById("pause").style.opacity = 1;
 document.getElementById("play").style.opacity = 0;
 } else {
  video.pause();
  document.getElementById("pause").style.opacity = 0;
  document.getElementById("play").style.opacity = 1;
  }
}
  video.onended = function(e){
document.getElementById("pause").style.opacity = 0;
document.getElementById("play").style.opacity = 1;
seekbar.style.width = 0;
}

  function updateUI() {
seekbar.style.width = (video.currentTime/video.duration)*width_total;
}
  video.ontimeupdate = updateUI;
  function getDetails(obj){
clickX = window.event.x-obj.offsetLeft-252;
video.currentTime = (video.duration / document.getElementById("timeline_active").clientWidth)*clickX;
document.getElementById("progress_container").style.width = clickX-4;
}
  video.addEventListener('loadedmetadata', function() {
console.log(video.duration);
});
 </script>
</body>
</html>

Pleijeris veidots, par pamatu ņemot Operas developeru artiklu, lasāms šeit.

Video faili ir kodēti ar ffmpeg softu, pats ffmpeg, VLC, un Media Player Classic-Home Cinema video garumus detektē pareizi.

Testēts uz Opera Browser 11.61 un Firefox 9.0.1

Lapa griezīsies lokāli, kā tāds prezentāciju materiāls.

Viens variants, kuru es pats domāju pielietot, lai labotu problēmu, būtu video garuma turēšana datubāzē, un pie pleijera palaišanas, šam iebarot i URL'i, i garumu, bet vai tas būtu īpaši pareizi, nezinu.

Jebkurš padoms, vai palīdzīgs spams laipni aicināts.

Labots Februāris 11, 2012 - spitaligais

Pierakstīties

HTML5 nepareizi reģistrē video garumu

Recommended Posts

spitaligais

Link to comment

Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Izveidot jaunu kontu

Pierakstīties

Sākums