Un autre: forcer Chrome à mettre entièrement en mémoire tampon la vidéo mp4
J'ai vu quelques discussions à ce sujet, mais sans réponses, alors j'ai pensé que j'en ajouterais une autre à la tombe des pages liées à Youtube polluées.
J'ai une vidéo mp4 de 100 Mo qui doit être entièrement téléchargée par le Navigateur,
Cependant, il n'y a aucun événement qui se déclenche lorsqu'il a été entièrement téléchargé, et Chrome semble arrêter de mettre en mémoire tampon plus de la vidéo jusqu'à ce que l'heure actuelle de la vidéo ait presque atteint la fin de la mémoire tampon, alors il demande plus.
Comment puis-je obtenir le navigateurs pour télécharger complètement la vidéo et la mettre en mémoire tampon à 100%?
Merci
2 réponses
Malheureusement, Chrome - comme les autres navigateurs HTML5-essaie d'être intelligent sur ce qu'il télécharge et évite l'utilisation inutile de la bande passante... cela signifie que parfois nous nous retrouvons avec une expérience sous-optimale (ironiquement YouTube en souffre tellement qu'il y a des extensions pour forcer plus de pré-tampon!)
Cela dit, Je n'ai pas trouvé cela nécessaire trop souvent avec un bon serveur et une bonne connexion-mais si vous avez besoin de quelque chose, la seule solution que j'ai trouvée est un peu marteau de forgeron... utilisez Ajax pour télécharger le fichier que vous souhaitez lire, puis le charger dans la source de l'élément vidéo.
L'exemple ci - dessous suppose que votre navigateur prend en charge m4v/mp4-Vous voudrez probablement utiliser le test canPlayType pour sélectionner le format vidéo le plus approprié pour vos utilisateurs si vous ne pouvez pas garantir (par exemple) Chrome. Vous voudrez également tester pour voir à quel point il gère les vidéos de la taille que vous voulez (j'ai essayé des vidéos assez grandes mais je ne sais pas quelle limite supérieure cela va poignée fiable)
L'échantillon est aussi assez simple... il lance la demande et ne communique rien à l'utilisateur pendant le chargement - avec votre vidéo de taille, vous allez probablement vouloir montrer une barre de progression juste pour les garder intéressés...
L'autre inconvénient de ce processus est qu'il ne va pas commencer à jouer jusqu'à ce que vous ayez complètement téléchargé le fichier-si vous voulez aller plus loin dans l'affichage dynamique de la vidéo à partir de votre tampon, vous devrez commencer plonger dans le monde du bord de saignement (pour le moment) de {[1] } comme décrit dans des messages comme http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/
<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL || window.URL).createObjectURL(myBlob);
// myBlob is now the blob that the object URL pointed to.
var video = document.getElementById("video");
console.log("Loading video into element");
video.src = vid;
// not needed if autoplay is set for the video element
// video.play()
}
}
xhr.send();
</script>
<video id="video" controls autoplay></video>
</body>
</html>
Ma solution est pour une vidéo beaucoup plus petite que L'OP décrit, mais le comportement souhaité est le même: empêcher la vidéo de commencer la lecture jusqu'à ce que la vidéo soit complètement mise en mémoire tampon. La vidéo devrait être lue pour les utilisateurs de retour si la vidéo est déjà mise en cache.
La réponse ci-dessous a été fortement influencée par cette réponse et a été testée sur Chrome, Safari et Firefox.
Fichier Javascript:
$(document).ready(function(){
// The video_length_round variable is video specific.
// In this example the video is 10.88 seconds long, rounded up to 11.
var video_length_round = 11;
var video = document.getElementById('home_video_element');
var mp4Source = document.getElementById('mp4Source');
// Ensure home_video_element present on page
if(typeof video !== 'undefined'){
// Ensure video element has an mp4Source, if so then update video src
if(typeof mp4Source !== 'undefined'){
$(mp4Source).attr('src', '/assets/homepage_video.mp4');
}
video.load();
// Ensure video is fully buffered before playing
video.addEventListener("canplay", function() {
this.removeEventListener("canplay", arguments.callee, false);
if(Math.round(video.buffered.end(0)) >= video_length_round){
// Video is already loaded
this.play();
} else {
// Monitor video buffer progress before playing
video.addEventListener("progress", function() {
if(Math.round(video.buffered.end(0)) == video_length_round){
this.removeEventListener("progress", arguments.callee, false);
video.play();
}
}, false);
}
}, false);
}
});
Ci-dessus javascript met à jour la source d'un élément vidéo comme celui-ci un:
<video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto">
<source id="mp4Source" type="video/mp4">
</video>