web-dev-qa-db-fra.com

Comment créer une image de chargement lors du chargement d'une vidéo HTML5?

Comme il faut du temps au lecteur vidéo pour charger la vidéo mp4, HTML5 prend-il en charge la lecture d'un logo de "chargement" lors du chargement de la vidéo?

enter image description here

Étant donné que mes applications asp.net sont une page mobile, il faut que l'utilisateur clique sur la vidéo pour lire la vidéo (Android, l'iphone ne prend pas en charge la lecture automatique). Donc, je ne peux pas faire un logo de "chargement" comme affiche, sinon l'utilisateur sera confus à ce sujet. Je souhaite afficher un logo de chargement lorsque l'utilisateur clique sur le bouton de lecture sur l'iPad.

merci

Joe

htmlvideovideo-streaming
17
Joe Yan

Il m'a fallu beaucoup trop de temps pour comprendre comment faire cela, mais je vais le partager ici parce que j'ai finalement trouvé un moyen! Ce qui est ridicule quand on y pense, car le chargement est quelque chose que toutes les vidéos doivent faire. On pourrait penser qu'ils auraient pris cela en compte lors de la création de la norme vidéo html5.

Ma théorie originale qui, selon moi, aurait dû fonctionner (mais ne fonctionnerait pas) était la suivante

  1. Ajouter l'image de chargement bg à la vidéo lors du chargement via js et css
  2. Retirez lorsque vous êtes prêt à jouer

C'est simple, non? Le problème était que je n'ai pas pu obtenir l'image d'arrière-plan pour montrer quand les éléments source ont été définis, ou l'attribut video.src a été défini. Le dernier coup de génie/de chance a été de découvrir (par l'expérimentation) que l'image de fond ne disparaîtra pas si l'affiche est réglée sur quelque chose. J'utilise une fausse image d'affiche, mais j'imagine que cela fonctionnerait aussi avec une image transparente 1x1 (mais pourquoi s'inquiéter d'avoir une autre image). Cela en fait donc probablement une sorte de piratage, mais cela fonctionne et je n'ai pas à ajouter de balisage supplémentaire à mon code, ce qui signifie qu'il fonctionnera dans tous mes projets en utilisant la vidéo html5.

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS (classe de chargement appliquée à la vidéo avec JS)

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

JS

  $('#video_id').on('loadstart', function (event) {
    $(this).addClass('loading');
  });
  $('#video_id').on('canplay', function (event) {
    $(this).removeClass('loading');
    $(this).attr('poster', '');
  });

Cela fonctionne parfaitement pour moi, mais uniquement testé dans chrome et safari sur mac. Faites-moi savoir si quelqu'un trouve des bugs et/ou des améliorations!

21
pixelearth

Aussi une solution simple pour ajouter une image de préchargement lors du chargement de la vidéo: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

l'affiche est une image transparente 1px.

CSS:

video {
    background-image: url(images/preload_30x30.gif);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center;
}
5
Rob

Utilisez l'affiche tag id

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

Plus d'informations peuvent être trouvées http://www.w3schools.com/html5/att_video_poster.asp

3
Simon Davies

Personnellement, je pense que la façon la plus élégante de le faire est d'utiliser un code comme celui-ci,

<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>

<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>

Pour le rendre encore meilleur, vous pouvez utiliser ontimeupdate au lieu de onplaying qui se déclencherait en continu. En ce qui concerne le temps de retard, en fait pas 1 mais 4 secondes - pour moi - est le meilleur.

1
TheLinguist

Ma solution a été d'ajouter ce qui suit à l'intérieur de la fonction window.fbAsyncInit = ():

var finished_rendering = function() {
    var el = document.querySelector('div#loading_msg');
    el.style.display="none";
}

FB.Event.subscribe('xfbml.render', finished_rendering);

Trouvé: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

1
user1574371

Vous pourriez probablement le faire avec JavaScript en créant une superposition d'image avec un gif de "chargement" animé que vous n'affichez que lorsque la vidéo est en cours de chargement et n'est pas prête à être lue.

Vous devez écrire JavaScript pour vous connecter à l'API multimédia pour détecter quand la vidéo est prête à être lue, etc. (afin que vous puissiez à nouveau masquer l'image), mais cela devrait être possible.

1
Ian Devlin