1

1) This First Screen appears when Web Page loads. (Screen 1)

First Image when Page loads

2) After few seconds of above Screen this Screen Comes. (Screen 2)

Second Image after some seconds

Why this Screen 1 comes? How should I remove that bug? I just want that after Web page load Screen 2 (Video) should appear/display.

How Can I do this? I am new with this Video embedding so please help.

My code for reference :

dropboxVideo : function(){
    new_video = document.createElement('video');
    new_video.setAttribute('controls','true');
    new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto'
    video = document.getElementById('RIZfC358yRk').appendChild(new_video);
    source = document.createElement('source');  
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
    video.appendChild(source);
    video.load();
}
eegloo
  • 1,479
  • 3
  • 17
  • 29

1 Answers1

2

I was looking for a built in solution but it seems that there's none. So I coded Something that is the result of what you are looking for:

    <div id="videoelt" style="display:none" ></div>
<script>
 function dropboxVideo (){
    var videoElt = document.getElementById('videoelt');
    new_video = document.createElement('video');
    new_video.setAttribute('controls','true');
    //new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto'
    new_video.setAttribute('autoplay','true');//autoPlay: false, 'preload':'auto'

    //new_video.setAttribute('poster','foo.jpg');
    source = document.createElement('source');  
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
    new_video.appendChild(source);
    videoElt.appendChild(new_video);

    new_video.addEventListener("canplay", function(e) { 
        videoElt.style.display = '';
    }); 
}

dropboxVideo();
</script>

The video element has events that you can listen to, the 'canplay' fits the moment it starts. So I hidden the video control until is ready and then I displayed it. Another option that you can use the 'poster' attribute of the video element. Put some image that will be displayed for hinting what's about to played.

lastboy
  • 566
  • 4
  • 12
  • Thank you. new_video.setAttribute('poster','foo.jpg'); this is good as per my requirement. canplay is also good but I do not to hide div. I will try to add waiting image till video load and after that other image. – eegloo Sep 21 '13 at 08:49
  • I think that the poster is enough as a solution, but anyway I thought it might be worth checking if possible ;-) – lastboy Sep 21 '13 at 08:50
  • Yes I checked with both options thanks for this. In poster option I am added waiting image and when video is ready to play then different image, so it looks nice. – eegloo Sep 21 '13 at 08:57