¿Cómo hacer una imagen de carga al cargar un video HTML5?

As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?

enter image description here

Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.

gracias

Joe

preguntado el 01 de febrero de 12 a las 14:02

6 Respuestas

It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.

My original theory that I thought should have worked (but wouldn't) was this

  1. Add loading bg image to video when loading via js and css
  2. Remove when ready to play

Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.

HTML

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

CSS (loading class applied to video with 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', '');
  });

This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!

Respondido el 01 de Septiembre de 15 a las 10:09

That's pretty elegant/simple. - Oliver Holmberg

on loadstart only trigers once but if you want loader whenever the video stops then you should use on waiting and on canplay events. - Ancestros

Also a simple solution to add a preloader image while loading the video: HTML:

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

the poster is a transparent image 1px.

CSS:

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

Respondido el 20 de diciembre de 19 a las 00:12

Use the tag id poster

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

Se puede encontrar más información http://www.w3schools.com/html5/att_video_poster.asp

Respondido 01 Feb 12, 18:02

hi, i had already place a poster. but there may be time gap between user click the "play" button and start playing - Joe Yan

Then you are seeing the black of the video itself, you best crop the video to remove the begining blackness or add the same place image into the start of the video, if a user presses play then the video is playing so they see that and if it then pauses to buffer they see the last image it was playing - Simon Davies

because my asp.net apps is a mobile page, it need user click on the video to play the video (android, iphone not support autoplay). so that i cannot make a "loading" logo as poster, otherwise, user will confuse about it. i want to display a loading logo when user click play button on iPad. - Joe Yan

in that case you will need to remove the unwanted start blackness and add an image to the footage, if it buffers you can not stipulate an image to show as once the video starts it will play and then stop if buffering required, and if this happens at the begining it will show you image or the paused footage - Simon Davies

You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.

You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.

Respondido 01 Feb 12, 20:02

My solution was to add the following inside of the window.fbAsyncInit = function():

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

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

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

respondido 10 mar '18, 19:03

Personally I think the most elegant way to do this is by using some code like this,

<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>

To make it even better you could use ontimeupdate en lugar de onplaying which would fire continuously. As for the delay time actually not 1 but 4 seconds -to me- is the best.

Respondido el 27 de Septiembre de 19 a las 02:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.