Comment faire une requête de plage pour une partie d'un fragment de média?

Question

Si nous voulions faire une HTTP/1.0 ou HTTP/1.1 demande, par exemple octets 2-100000 ou seconde 20 à 35 secondes d'une ressource média donné par exemple, .webm ou .ogg audio ou .mp4 vidéo, où la réponse serait un fragment de média discret capable de lire sans autres parties de la ressource multimédia, comment pourrions-nous y parvenir?

Par exemple

let headers = new Headers(); 
let range = 1024 * 1024; 
headers.append("Range", "bytes=0-" + range); 
let request = new Request(url, {headers:headers}); 
fetch(request) 
.then(response => response.blob()) 
.then(data => audio.src = URL.createObjectURL(data)); 

charges et les médias joue

let headers = new Headers(); 
let range = 1024 * 1024; 
headers.append("Range", "bytes=" + range + "-" + range * 2); 
let request = new Request(url, {headers:headers}); 
fetch(request) 
.then(response => response.blob()) 
.then(data => audio.src = URL.createObjectURL(data)); 

journaux succès statuts de réponse 200 et 206, mais ne rend pas la lecture multimédia à l'élément <audio>. Comment créer une requête de plage pour un média donné, qui retourne uniquement la plage demandée de la ressource en tant que ressource discrète capable de lire sans autres parties du média, où le fragment de média demandé peut être une partie discrète du média Ressource?

Answer 1

Vous pouvez tout simplement pas.

Vous devez absolument les en-têtes de fichier multimédia (métadonnées) pour votre navigateur pour pouvoir décoder les données qu'il contient.

Différents formats de médias auront des règles d'analyse différentes, avec des morceaux de données différemment et obtenir ordonné qu'une partie des données brutes briser toute la structure des données. Ainsi, avec certains formats de fichiers, vous pourriez être en mesure de lire le début d'un média en ne fournissant que le début du fichier, mais tous les formats de médias ne le permettent pas et ne s'attendent même pas à une lecture de début à la fin.

Que peut-on faire si est d'utiliser le timerange parameter de src du MediaElement:

#t=[starttime][,endtime]

const url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg'; 
 

 
btn.onclick = e => { 
 
    // fast input check for the demo 
 
    if (max.value > aud.duration) 
 
    max.value = aud.duration; 
 
    if (min.value > max.value) 
 
    min.value = max.value - 1; 
 
    // construct our timerange parameter 
 
    let range = '#t=' + min.value + ',' + max.value; 
 
    // append it to our original url 
 
    aud.src = url + range; 
 
} 
 
btn.onclick();

<audio id="aud" aud controls></audio><br> 
 
<label>start: <input id="min" type="number" value="10" min="0" max="119"></label> 
 
<label>end: <input id="max" type="number" value="20" min="1" max="120"></label> 
 
<button id="btn">re-load</button>