File: index.html

Recommend this page to a friend!
  Classes of Dantigny francois   JavaScript MP4 Parser   index.html   Download  
File: index.html
Role: Example script
Content type: text/plain
Description: Example script
Class: JavaScript MP4 Parser
Parse and extract information from MP4 video files
Author: By
Last change: Update index.html
Update index.html
Date: 2 years ago
Size: 6,286 bytes
 

Contents

Class file image Download
<!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>