Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

How to stop black flash while HTML5 video loads in Google Chrome?


  • Please log in to reply
3 replies to this topic

#1 David7626

David7626

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:07:07 PM

Posted 18 February 2015 - 07:22 PM

Right now, I have three different videos playing automatically whenever I refresh my browser. But every time I test my site in Google Chrome, I notice that a black background flashes on screen for one second before a video loads. This doesn't happen in the other browsers.

I coded my videos looping in JS, and here is how it looks. Is there a way to prevent the screen from flashing black every time I play a video?

 

 

 

var videoPlayer = document.getElementById('video');

function playVideo(){
videoPlayer.play();
videoPlayer.loop = true; 

var videos = [
"video1",
"video2",
"video3",
], videos = videos[Math.floor(Math.random() * videos.length)];

videoPlayer.src = "../wp-content/videos/" + videos + ".mp4";
}

videoPlayer.addEventListener('ended', playVideo, false);

playIt();

 



BC AdBot (Login to Remove)

 


#2 David7626

David7626
  • Topic Starter

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:07:07 PM

Posted 19 February 2015 - 07:14 PM

I figured out one way how to do it.

 

I created a jQuery file to make the video fade so it masks the black flash.

 

 

jQuery(document).ready(function() {

$(#video).hide(0).fadeIn(1500);

});

 

By the way, '#video' is the element that's sourcing the video on screen.



#3 David7626

David7626
  • Topic Starter

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:07:07 PM

Posted 19 February 2015 - 11:29 PM

Apparently the screen still shows a black flash if I press F5 on the keyboard. 

 

Can it be possible for jQuery code to work while refreshing the page?



#4 BakerMelissa

BakerMelissa

  • Members
  • 10 posts
  • OFFLINE
  •  
  • Local time:04:07 PM

Posted 02 June 2015 - 10:22 PM

You may convert the HTML5 video to other format? 

 

Maybe your application can't read the video. 






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users