<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>Test</title>
<style type="text/css">
#inp{
display : inline;
}
#opt{
display : none;
}
#isIE{
display : none;
}
</style>
<script type="text/javascript">
var ind=0;
let indarrived = 0;
let res=[];
let listeficname=[];
// 4 let pour progress
let maxBar = 200;
let currentBar = 0;
let progressBar;
let intervalId;
//let timedeb, timeend; // pour évaluation de l'efficacité
function change_ind(t) {
document.querySelector('#out').innerHTML = "";
document.querySelector('#out').innerHTML = res[t];
}
function init(){
/* ------------------------------
Interface ProgressBar
------------------------------ */
let initialisation = function() {
progressBar = document.getElementById( "progressBar" );
progressBar.value = currentBar;
progressBar.max = maxBar;
}
let displayBar = function() {
//currentBar++;
progressBar.value = currentBar;
}
intervalId = setInterval( displayBar , 100 ); // dysplayBar est appelée toutes les 100 millisecondes
initialisation();
/* --------------------------------------------------
Détection d'Internet Explorer : Edge fonctionne !!
-------------------------------------------------- */
let ua = window.navigator.userAgent;
let msie = ua.indexOf('MSIE ');
let trident = ua.indexOf('Trident/');
if ((msie > 0) || (trident > 0)){
document.getElementById('inp').style.visibility = 'hidden';
document.getElementById('out').style.visibility = 'hidden';
document.getElementById('isIE').style.display = 'inline';
}
/* --------------------------------------------
corps principal : le(s) Worker(s)
------------------------------------------- */
document.querySelector('#inp').onchange = function(e) {
let fichiersInput = document.querySelector("#inp");
let fichiers = fichiersInput.files;
let nbFichiers = fichiers.length;
let tmp = {};
//timedeb = Date.now(); // pour évaluation de l'efficacité
for (let k=0; k<nbFichiers; k++){
res.push('');
new_element = new Option("", k, false, true);
document.getElementById("opt").options[document.getElementById("opt").options.length] = new_element;
}
// Envoit les fichiers de manière synchrone les uns derrières les autres
while (ind < nbFichiers){
listeficname.push(fichiers[ind].name);
document.querySelector("#opt").options[ind].text=fichiers[ind].name;
let MP4worker = new Worker('workerMP4.js');
// Retour du Worker
MP4worker.addEventListener('message', function(e) {
if (e.data.data != 'nop'){
// pour la progressBar : 2 lignes ci-dessous
indarrived++;
currentBar = (indarrived / nbFichiers) * maxBar;
res[e.data.num]=e.data.data;
} else {
// pour la progressBar : 2 lignes ci-dessous
indarrived++;
currentBar = (indarrived / nbFichiers) * maxBar;
tmp.data=listeficname[e.data.num]+" isn't a MP4 file !";
res[e.data.num]=tmp.data;
}
MP4worker.terminate();
if (indarrived == nbFichiers){
displayBar();
clearInterval(intervalId);
document.getElementById("inp").style.display="none";
document.querySelector("#opt").selectedIndex=0;
document.querySelector("#opt").style.display="block";
document.querySelector('#out').innerHTML = "";
document.querySelector('#out').innerHTML = res[0];
//timeend = Date.now(); // pour évaluation de l'efficacité
//let duration = timeend - timedeb;
//alert('duration = '+duration);
}
}, false);
MP4worker.postMessage([fichiers[ind],ind]); // il en reste ? Envoit le suivant !!
ind++;
}
}
}
</script>
</head>
<body onload="init()">
<center>
<p><progress id="progressBar"></progress></p>
<p id="isIE">Microsoft Internet not allowed ... Sorry !</p>
<input id="inp" type="file" multiple>
<select size="1" id="opt" onchange="change_ind(document.getElementById('opt').options.selectedIndex)"></select>
<br>
<textarea id="out" rows="40" cols="120">And then ? Choose some MP4 files (.MP4, .M4V, ... )</textarea>
</center>
</body>
</html>
|
Download
