How to make boot image when uploading HTML5 video?

Question

Since the video player takes time to download mp4 video, does HTML5 support playing the “download” logo when downloading a video?

Since my asp.net applications is a mobile page, the user needs to click on the video to play it (Android, iphone does not support autorun). Therefore, I can not make a "boot" logo as a poster, otherwise the user will be confused by this. I want to display the download logo when the user presses the play button on the iPad.

thanks

Joe

Answer 1

It took me too much time to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is funny when you think about it, because downloading is what all the videos need to do. You would think that they would take this into account when creating the html5 video standard.

My initial theory, which I thought about, was to work (but was not), was

• Add upload bg image to video when uploading via js and css
• Delete when ready to play.

Simple, right? The problem was that I could not get the background image to show when the original elements were set or the video.src attribute was set. The last stroke of genius / good luck was to find out (through experiments) that the background image would not disappear if the poster was set up for something. I am using a fake poster image, but I think this will work with a 1x1 transparent image as well (but why bother with another image). Thus, this makes it probably a kind of hack, but it works, and I don’t need to add extra markup to my code, which means that it will work in all my projects using html5 video.

HTML

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

CSS (loading class applied to JS videos)

 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 fine for me, but it only checks on Chrome and Mac Safari. Let me know if anyone finds bugs and improvements!

Answer 2

Also a simple solution to add an image before uploading when uploading a video: HTML:

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

The poster is a 1px transparent image.

CSS

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

Answer 3

Use a poster with a tag id.

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

Further information can be found http://www.w3schools.com/html5/att_video_poster.asp

Answer 4

Perhaps you could do this using JavaScript by creating an overlay of images with an animated "bootable" gif, which you only show when loading a video and are not ready to play.

You will need to write JavaScript to communicate with the Media API to detect when the video is ready to play, etc. (so you can hide the image again), but this should be possible.

Answer 5

My solution was to add the following inside 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); 

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

Answer 6

Personally, I think the most elegant way to do this is with 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 eg 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 can use ontimeupdate instead of onplaying , which will work continuously. As for the delay time, it is actually not 1, but 4 seconds. -to me- is the best.