Video in background

3 replies [Last post]

Thu, 08/19/2010 - 09:07

Joined: 08/19/2010

Points: 1

Hi everyone,

We're currently working on a site of a fashion photographer and his concept was to use a looping video as a background of the page. We don't want to utilize Flash for this reason, beacuse it eats out memory, freezes in several browsers and it won't be supported by Apple's iOS platform.

We were so glad to find Kaltura, and the video player works like a charm, but we want to hide all the controls related to the video because as I described above we want to use the video as a background element. We don't want to hide the kaltura logo and the trackback link of course we'll display them on the credits page.

Thu, 08/19/2010 - 22:27

papyromancer

Joined: 05/13/2009

Points: 164

Below is a quick way to remove the library provided controls from the video player.

Keep in mind that this is a rather experimental use of the library. In Chrome, I was not able to remove the browser default controls that appear on mouseover, so you may need to do some div hacks to place the video in 100% of the background and then place another div over it to intercept the mouse presence and prevent the browser provided controls from appearing.

Also, NB, Videos are currently displayed at z-index:1 so you'll want everything else to be at a higher value. We have had internal discussions about removing this default, so you're the text case, you'll want to set up values that will be consistent even if the default is changed.

<!DOCTYPE html> 

<html>

<head> 

<title>Light Corporation</title> 

<script type="text/javascript" src="http://html5.kaltura.org/js" ></script>

<script type="text/javascript">

mw.setConfig('EmbedPlayer.NativeControls', true );

</script>

</head>

<body style="background-color:#000">

<p align="center">

  <video width="100%" height="100%" autoplay loop>

    <source src="http://lightcorp.s3.amazonaws.com/LightCorp.m4v" >

  </video>

</p>

</body> 

</html>

Fri, 08/27/2010 - 12:40

jorisw

Joined: 08/27/2010

Points: 2

Is there also a way to just not show any controls? For instance, can I disable Kaltura's controls without switching to native controls?

Or is there an empty skin/theme that I could use?

Wed, 08/17/2011 - 23:58

Michael.Dale

Joined: 02/22/2009

Points: 76

with recent commits support for hidden controls has improved. you can set <video controls="false" .. and usenativecontrols="true" > to force native player and or then to enable or disable the controls. YOu probably want to just set controls='false';