Длина видео по JavaScript перед загрузкой видеофайла - PullRequest
Новая
       41

Длина видео по JavaScript перед загрузкой видеофайла

0 голосов
/ 02 марта 2019

Мне нравится узнавать длину видео из локального файла на рабочем столе пользователя перед загрузкой.Событие «video.onload» не сработало (см. Код), поэтому я помог себе с setTimeout после загрузки видео.Но я не люблю использовать setTimeout.Есть ли способ чище? 

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
		var video = document.getElementById('myVideo');
		var obj_url = window.URL.createObjectURL(f);
		video.src = obj_url;
        console.log(f.name+ " " +f.type);
        console.log(video.src);

		video.onload = function() {
    // It didn't work so I used delayedchk() 
    // window.URL.revokeObjectURL(this.src);
		}
    delayedchk();    
	}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

function show(){
	vid = document.getElementById("myVideo");
	document.getElementById("laenge").innerHTML = Math.floor(vid.duration);
	vid.play();
  window.URL.revokeObjectURL(vid.src);
}

function delayedchk(){
	  var vdur = document.getElementById("myVideo").duration;
    console.log(typeof vdur +' = '+vdur);
    if( isNaN(vdur) ){
      	setTimeout(delayedchk,500);
    }else{
		show();
    }
}
<!DOCTYPE html> 
<html> 
<body onload="show()">
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></video>
  <h1>Lenght: <span id="laenge"></span> sec.</h1>
  <input type="file" id="files" name="files[]" multiple />
</body> 
</html>

1 Ответ

0 голосов
/ 02 марта 2019

Вы можете получить свойство duration видео , прослушав событие loadedmetadata: 

var myVideoPlayer = document.getElementById('myVideo');
myVideoPlayer.addEventListener('loadedmetadata', function() {
  document.getElementById('laenge').innerHTML = myVideoPlayer.duration;
});
<h1>Length: <span id="laenge"></span> sec.</h1>
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" autoplay></video>
...