Play mp4 video in HTML5 video tag with Ambilight effect

3 replies [Last post]

Posted: Tue, 2012-01-31 08:55 Timcy

Hello:

I want to play mp4 video in HTML5 with ambilight effect. I succeeded to implement the same:

<video id="example" height="340" width="592" controls="controls" autobuffer="true" autoplay="autoplay" poster="images/image_1.jpg">
<source src="media/video1.mp4" type="video/mp4" />
<source src="media/video.ogv" type="video/ogg" />
<source src="media/video.webm" type="video/webm" />
</video>
<script>
ambiLight.create(document.getElementById('example'));
</script>

Ref Url:
http://chikuyonok.ru/ambilight/ambilight.js
http://media.chikuyonok.ru/ambilight/

Now, I want to play the same using JW Player with minima skin & sharing plugin. And, I am struggling since 5 days incorporate both of ambilight & jw player.

Here's my updated code for which I am working:
jwplayer('example').setup({
'autostart': 'true',
'width': '480',
'height': '270',
plugins: { "sharing-3":
{
code: "<encoded iframe>",
link: "<video link>"
}
},
'skin': 'skins/minima/minima.zip',
modes: [
{ type: 'html5' },
{ type: 'flash', src: 'jwplayer/player.swf' }
],
events: {
onReady: function() {
alert('ready');
this.play();
ambiLight.create(document.getElementById('example_video'));
}
}
});

Can you please look into this and help me out.

thanks
timcy

Posted: Tue, 2012-01-31 14:29 PabloS

@timcy -

Do you have an example page with the JW Player set up?

Posted: Wed, 2012-02-01 00:29 Timcy

thanks for replying!

Here's the html page having JW Player Setup as well as Ambilight Effect:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ambilight for video tag</title>
<style type="text/css">
body
{
background: #000;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 10px;
color: #666;
}

#video-wrap
{
position: relative;
margin: 20px auto 10px auto;
width: 592px;
}

video
{
-webkit-border-radius: 3px;
position: relative;
z-index: 3;
font-size: 12px;
}

canvas.ambilight-left, canvas.ambilight-right
{
position: absolute;
width: 300px;
height: 200%;
top: -50%;
}

canvas.ambilight-left
{
left: -270px;
top: -53%;
background-image: url(images/mask3-left.png);
}

canvas.ambilight-right
{
right: -270px;
top: -51%;
background-image: url(images/mask3-right.png);
}

#copyright
{
text-align: center;
}

#copyright a
{
color: #eee;
}
</style>

<script src="script/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="script/ambilight.js"></script>
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>

</head>
<body>
<section>
<div id="video-wrap">
<video id="example" height="340" width="592" autobuffer="true" autoplay="autoplay">
<source src="media/sample.mp4" type="video/mp4" />
<source src="media/sample.ogv" type="video/ogg" />
<source src="media/sample.webm" type="video/webm" />
</video>
</div>
</section>
<script type="text/javascript">
jwplayer('example').setup({
'autostart': 'true',
'id': 'playerID',
'width': '480',
'height': '270',
modes: [
{ type: 'html5' },
{ type: 'flash', src: 'jwplayer/player.swf' }
],
events: {
onReady: function() {
ambiLight.create(document.getElementById('example_video'));
},
onPlay: function() {
alert('play');
}
}
});
</script>
</body>
</html>

Two mask images are at:
http://media.chikuyonok.ru/ambilight/mask3-left.png
http://media.chikuyonok.ru/ambilight/mask3-right.png

Please let me know if you need anything else.

thanks
timcy

Posted: Wed, 2012-02-01 16:12 PabloS

@Timcy -

Having an actual test page with all the assets available would be more useful, as opposed to HTML, where the specific assets you're using may be different from any that I might use.

Play mp4 video in HTML5 video tag with Ambilight effect

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company