Develop Reference

Javascript: change functions parameters on click

I have a simple code that is using the library Lottie for SVG animations.
There are 2 animations. I need to make one first on load and the second start when user click on the button. At the same time when the second animation starts second animation replace the first.
So in my expectations I will need to change the parameter of JS function.
Is there any option how can I change path parameter in lottie function and start the second animation than replace the first animation with the second?
HTML:
<div id="element">
<button onclick="myFunction()">Click me</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js" integrity="sha512-35O/v2b9y+gtxy3HK+G3Ah60g1hGfrxv67nL6CJ/T56easDKE2TAukzxW+/WOLqyGE7cBg0FR2KhiTJYs+FKrw==" crossorigin="anonymous"></script>
JS:
var element = document.getElementById("element");
var animPath = 'anim/data-1.json'
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
path: animPath // the path to the animation json
});
function myFunction() {
var animPath = 'anim/data-2.json'
}

Put your animation code in a function and call it with a default path when the page load. Create a click event and call it with a different path.
function runAnimation(animPath) {
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
path: animPath // the path to the animation json
});
}
runAnimation("anim/data-1.json");
let element = documment.querySelector("clicked element selector");
element.addEventListener("click", () => {
runAnimation("anim/data-2.json");
})

ng-smartBanner is not working?

Iam facing problem with ng-smartBanner,unable to see banner with respect to device,It is showing directly the binded text.
JavaScript:
var myAppModule = angular.module('myApp', ['ng-smartBanner'])
.config(function(BannerOptionsProvider){
BannerOptionsProvider.setBannerOptions(
{
title: 'toto', // What the title of the app should be in the banner
(defaults to <title>)
author: "toto gro", // What the author of the app should be in the banner (defaults to <meta name="author"> or hostname)
price: '1 milion de dollar', // Price of the app
icon: 'icon-app.png', // The URL of the icon (defaults to <meta name="apple-touch-icon">)
button: 'TELECHARGER', // Text for the install button
urlStore: 'http://www.google.de', // The URL for the button. Keep null if you want the button to link to the app store.
scale: 'auto', // Scale based on viewport size (set to 1 to disable)
speedIn: 300, // Show animation speed of the banner
speedOut: 400, // Close animation speed of the banner
daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
force: 'ios' // Choose 'ios', 'android' or 'windows'. Don't do a
browser check, just always show this banner
}
);
});
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
Here is my plunker link: Plunker

change logo and preview image size on full screen

I am using a pro version of Jwplayer. Can I change the size of the logo image for branding and the image size of the Video preview (VTT) in fullscreen mode ?
I need to show bigger image in video preview when on fullscreen and smaller when restored. Same for my custom logo.
This the code I am using
jwplayer("container").setup({
sources: [{
file: "http://15.20.19.73:1935/vod/smil:pls183.smil/jwplayer.smil"
}],
tracks: [{
file: "http://15.20.19.73/video_vtt/thumbs/183.mp_vtt/183.mp_thumbs.vtt",
kind: "thumbnails"
}],
events: {
onComplete: function() {
endHandler();
}
}
});
So It shows a video preview and a logo on left-top position. But it is always of fixed size. In Fullscreen or Not. Can I vary the size of video preview image (Like Youtube does) and the logo size.

You can set the custom logo to a different size in fullscreen using the .jw-flad-fullscreen class in CSS.
.jw-flag-fullscreen .jw-logo {
      width: 150px !important;
      height: 150px !important;
    }
CSS Reference: https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/
JW Player's video transcoding outputs thumbnails at a static 120px width size, so you cannot adjust the thumbnail size in the same way: http://assets-jpcust.jwpsrv.com/strips/92XQ91bP-120.jpg

Below the solution that is working today. For JWplayer 8 and others.
//name player div...
var playerInstance = jwplayer("player");
//Set start logo...
playerInstance.setup({
file: '//gticontrol.com/video.m3u8',
repeat: true,
autostart: shouldAutostart,
"logo": {
"file": "https://gticontrol.com/br_tnt_m.png",
"hide": "true",
"position": "top-left"
}
});
//Creat function to change logo
function changeLogo(playerId, logoUrl){
var logoElem = document.querySelector('#'+playerId + ' .jw-logo');
logoElem.style.backgroundImage='url('+logoUrl+')';
};
//Call If need change logo...
changeLogo(playerInstance.id, 'https://gticontrol.com/mx_hbo-2_m.png');

SoundManager2 360 player usage with createSound method

According to documentation doc here, dynamically creating sound is like that but how will i create 360 player UI with that script, it only plays mp3 at the background without any UI element
var mySoundObject = soundManager.createSound({
// optional id, for getSoundById() look-ups etc. If omitted, an id will be generated.
id: 'mySound',
url: '/audio/mysoundfile.mp3',
// optional sound parameters here, see Sound Properties for full list
volume: 50,
autoPlay: true,
whileloading: function() { console.log(this.id + ' is loading'); }
});
Thanks

jw player resume after refresh

how to make the JW Player have a "resume" or "remember" function which marks position of last
play position of movie and remembers it when you come back to watch video again? So, if a
viewer stopped watching a movie at 36:25 minutes on a 2 hour movie and had to go offline, when
they returned to watch movie, the JW player would open to the correct position and "resume"
play.

This should get you started:
http://osric.com/chris/jwplayer/jwplayer5.4/ontime.html
The JavaScript from that page is as follows:
$(document).ready( function() {
jwplayer("container").setup({
file:"playlist.xml",
height: 300,
width: 400,
events: {
onTime: function(event) {
$('#timer').html(Math.floor(event.position));
}
}
});
That code sets an element with the id of "timer" to be the value of the current position.
You could then create either a cookie to save the variable from the JS.
Edit
You can use this link to help with the cookie function:
http://www.w3schools.com/js/js_cookies.asp
$(document).ready( function() {
jwplayer("container").setup({
file:"playlist.xml",
height: 300,
width: 400,
events: {
onPause: function(event) {
setCookie(event.position);
}
}
});