We Keep Coding

Animation BodyMovin starts before rendering images

Animation BodyMovin svg starts before rendering images, so after rendering animation go to end. How do delay before start animation or true start animation only after rendering all images in animation?
Run animation with ScrollTrigger, because that i think images not download before start animation.
Site: http://test.eniso.ru
var ledData = {
container: document.getElementById('led-container'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/window.json'
};
var ledAnim = bodymovin.loadAnimation(ledData);
function playLED (animData) {
ledAnim.play();
ledAnim.setDirection(1);
ledAnim.setSpeed(20);
}
ScrollTrigger.create({
trigger: ".container",
markers: true,
start: "top",
scrub: true,
pin: true,
onEnter: playLED,
})

make a video player which is auto play from playlist using jquery

I need to autoplay from a play list. When a song ends it should automatically play the next song in the play list. How can I do this? Please help.
$(document).ready(function() {
projekktor('#player_a', {
poster: 'media/intro.png',
title: 'this is projekktor',
playerFlashMP4: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
playerFlashMP3: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
width: 640,
height: 385,
enableTestcard: true,
autoplay: true,
playlist: [{
0: {
src: "1.mp4",
type: "video/mp4"
},
1: {
src: "2.mp4",
type: "video/mp4"
},
3: {
src: "3.mp4",
type: "video/mp4"
}
}]
}, function(player) {} // on ready
);
});

Recommended to use a 3rd party jquery plugin
Example
https://github.com/brightcove/videojs-playlist
http://videojs.com/

SlidesJS Autoplay not working

I am trying to make autoplay work on a simple SlidesJS carousel:
http://www.cycle22x.com/
I checked out some other threads that answer similar problems but the solutions provided aren't working? Here is the script that is included in the file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/scripts/jquery.slides.min.js"></script>
<script>
$(function()
{
$('#slides').slidesjs(
{
play: 1000,
pause: 10,
hoverPause: true,
width: 960,
height: 540,
navigation:
{
effect: "fade"
},
pagination:
{
effect: "fade"
},
effect:
{
fade:
{
speed: 400
}
}
});
});
</script>
Any thoughts or ideas would be greatly appreciated.

you need to use auto: true to make it autoplay, like:
...
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
See here:: Example Autoplay

JWPlayer only loading buy not play in IE 8

jwplayer("mediaplayer").setup({
provider: 'http',
file: encodeURI(JWplayer_top_video_path),
image: "http://vod.hkheadline.com/hkheadline/instant_video/2013/0103/6beae821acd0eaf1d59e0daa974f5836.jpg",
//Player for IE,FF,Chrome
flashplayer: "./js/jwplayer/player.swf",
//Skin for IE,FF
skin: "./js/jwplayer/skin/glow.zip",
wmode: "opaque",
width: 650,
height: 390,
stretching: "uniform",
autostart: "false",
autopreloading: "true",
dock: "true",
bufferlength: 10,
plugins: {
// fbit: {enable: true},
// tweetit: {enable: true},
"gapro-2":{
"trackstarts": true,
"trackpercentage": true,
"trackseconds": true,
"tracktime": true
}
},
modes: [
{ type: "html5",
//Skin for Chrome
config: {skin: "./js/jwplayer/skin/glow/glow.xml"}
},
{ type: "flash", src: "./js/jwplayer/player.swf" }
],
'events': {
onComplete: function(e){
$('#mediaplayer').remove();
close_overlay();
}
}
});
The above code is the setup jwplayer. It works perfectly on chrome, fx, safari , but not in IE8. In Ie 8 the player is shown and I can click on the play button, However, it keeps loading and loading but never play the movie, how to fix the problem ?thanks

Sencha Touch JW Player not playing with multiple overlays

In My Sencha touch 2.0 app I am having an issue with a JW javascript video player not playing when there are two overlays up at the same time and I wanted to see if anyone could better elaborate on what is going wrong or what may be causing it so I can try and look around and try to figure out what is going on (i am new to sencha and javascript). I have the project loaded up at http://www.cox7.com/sean even tho it will only be run on an iPad.
Try the steps below to better see what I am talking about and also note that a lot of the jwplayer events are being logged in the javascript console so you can see whats going on......
1) click on any of the panels on the main page which will open a overlay with the video title description and a javascript video player. You will see that you can play the video.
2) do a search for "stem" in the search bar (top right corner of the main screen) this will then display a pannel with the search results.
3) click on any of the search results which will then open that same video player pannel but this time you will not be able to click the play button. It's almost like the pannel is not the top most element but I can still scroll and the onTouchStart event fires but the video never starts.
Anyone know what might be causing this? any help is much appreciated.
Here is my controller setup for the search result overlay....
showStreamSearchPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoSearchPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoSearchPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoSearchPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoSearchPlayerOverlay.show();
StreamVideoSearchPlayerOverlay.setActiveItem(2);
},
And here is my controller setup for the normal home screen asset overlay...
showStreamPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoPlayerOverlay.setActiveItem(2);
StreamVideoPlayerOverlay.show();
}