Howto use more than one clip on one page? - video.js

Hi I am using more than one clips on my site with video.js player. My problem is than, if you click on another clip the first one still runs.
How do I have to set the player only to run the selected clip?
I gave all clips unique IDs but this doesn't solve it.
Any ideas?
Thanks katasun

When starting a video clip, you need to check all other clips and stop them, if running. You could do this in JavaScript like this:
playerIDs = ['id1', 'id2'];
var length = playerIDs.length;
for (var i = 0; i < length; i++) {
var myPlayer = videojs(playerIDs[i]);
myPlayer.on("play", function() {
for (var a = 0; a < length; a++) {
if(playerIDs[i] != playerIDs[a]) {
var otherPlayer = videojs(playerIDs[a]);
otherPlayer.pause();
}
}
});
}

Related

Turning Multiple Layers On and Off in Photoshop with export image Script

I have 1 group in photoshop in which there are multiple images which are hide by default except the first one, I looking to turn show every image one by one except first one and then export as image with merged first layer
Note : Please see the screenshots Layer
Can someone point me in the direction whether it is possible with script or any action?
I've never scripted in Photoshop but trying to figure this out on my own.
Whole post edited, yet this script covers usability of the original script (that worked only on a single layer group) and also extends itself onto all layer groups.
Script takes the layers from each layer groups in the file and iterates through all of them except the first one in the given group turning them on and off for saving. First layer in each group is always visible for a given group iteration. Exports as PNG but you may adjust anything you need - export options, path, file name etc. Created for CS6 but should work with any version, just check it out.
Any more information you may need is in the reference manual. Just Google for Photoshop CS6/CC Javascript Reference.
The code's below, just copy-paste it using Notepad and save as jsx file. You may test it using ExtendScript Toolkit (it has been installed together with anything from Adobe, you just need to find it). If it works as intended, place the file within Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts folder, restart Photoshop and the script will be accessible through File > Scripts menu. You may also bind a keyboard shortcut to it if this action needs to be repeated over and over many times. Cheers!
#target Photoshop
if (documents.length == 0) {
alert("nothing opened");
} else {
// start
//setup
var file = app.activeDocument;
var groupsAmount = file.layerSets.length; // get the layer groups
// iterate through groups
for (var k=0; k < groupsAmount; k++) {
hideAllLayers();
var images = file.layerSets[k].layers; // get the layers from the given group
file.layerSets[k].visible = true;
images[0].visible = true; // show the first layer in this group
// begin "i" from 1 to start from the 2nd layer
for (var i=1; i < images.length; i++) {
images[i].visible = true;
exportimage(images[i].name);
images[i].visible = false;
}
}
// function used to export image (adjust as you want accoring to the manual)
function exportimage(name){
var options = new ExportOptionsSaveForWeb();
options.format = SaveDocumentType.PNG;
options.PNG8 = false;
options.transparency = true;
options.optimized = true;
// adjust path & name
file.exportDocument(File(file.path+"/"+name+".png"),ExportType.SAVEFORWEB, options);
}
// function to hide all layers
// simplified version of http://morris-photographics.com/photoshop/scripts/downloads/Hide%20All%20Layers%202-1-0.jsx
function hideAllLayers() {
var ref = new ActionReference();
ref.putEnumerated(cTID('Lyr '), cTID('Ordn'), cTID('Trgt'));
var desc = new ActionDescriptor();
desc.putReference(cTID('null'), ref);
executeAction(sTID('selectAllLayers'), desc, DialogModes.NO);
var ref = new ActionReference();
ref.putEnumerated(cTID('Lyr '), cTID('Ordn'), cTID('Trgt'));
var list = new ActionList();
list.putReference(ref);
var desc = new ActionDescriptor();
desc.putList(cTID('null'), list);
executeAction(cTID('Hd '), desc, DialogModes.NO);
}
function cTID(s) {return app.charIDToTypeID(s);}
function sTID(s) {return app.stringIDToTypeID(s);}
//end
}

Reset Twiiter bootstrap carousel when scrolls of page

Does anyone know if there is a way to reset twitter bootstrap carousel when it is no longer visible?
I have it on the top of the page with three slides, is there a way to slide it back to the first one when the users scrolls down to the rest of the page?
Thank you in advance
In the carousel documentation you have this:
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
So if you want to get back to the first element, all you have to do is to use this: $('#myCarousel').carousel(0);
You should probably optimize the code a bit but this should get you started:
var getPageScroll = function(document_el, window_el) {
var xScroll = 0, yScroll = 0;
if (window_el.pageYOffset !== undefined) {
yScroll = window_el.pageYOffset;
xScroll = window_el.pageXOffset;
} else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
yScroll = document_el.documentElement.scrollTop;
xScroll = document_el.documentElement.scrollLeft;
} else if (document_el.body !== undefined) {// all other Explorers
yScroll = document_el.body.scrollTop;
xScroll = document_el.body.scrollLeft;
}
return [xScroll,yScroll];
};
$(window).scroll(function(e) {
var top = $('#carousel-example-generic').offset().top;
if(top < getPageScroll(document,window)[1]) $('#carousel-example-generic').carousel(0);
});

Looping a html5 video set number of times

How could we do this using video.js My initial thoughts are we can trigger play when the video ends.
pseudo code
for (int i = number_of_times_to_loop, i>=0, i--) {
see if the timer of the video reached the end {
trigger play from start
}
}
You can play the video on the ended event to loop. Then it's just a matter of tracking how many times you have played it already.
var max = 3,
i = 1;
videojs("home_video").on('ended', function(event) {
if (i < max) {
this.play();
i++;
}
});

deleting multiple nodes in dojo.fadeOut onEnd

I'm trying to remove multiple nodes specified by checkboxes after a dojo fadeout. The nodes are simple HTML tr elements.
There is an onclick event on a button that executes the below.
var tbody = dojo11.byId("resultBody1");
for (var k=0; k < selections.length; k++) {
var temp = selections[k];
dojo11.fadeOut( {
node:temp,
duration:1500,
onEnd: function() {
tbody.removeChild(temp);
}
}).play();
}
It works fine for one node. If I select two or more nodes, it fadesOut all selected nodes in unison, but only removes the last selected node from the DOM tree while reporting errors for the first two.
Firebug console output:
exception in animation handler for: onEnd
Node was not found" code: "8
var _10b=null;\n
Any ideas how to remove all the selected nodes from the tree after the fadeOut?
This is actually a javascript closure issue. Fixed by closing off the current value of the indexed node each time the call is made to remove the node.
for (var k=0; k < selections.length; k++) {
var temp = selections[k];
dojo11.fadeOut( {
node:temp,
duration: 1500,
onEnd: function(node) {
return function() {
tbody.removeChild(node);
}
}(temp)
}).play();

Have Google maps center around geo-locs and zoom in appropriately

I would like to pass an x amount of geo-locations to the Google Maps API and have it centered around these locations and set the appropriate zoom level so all locations are visible on the map. I.e. show all the markers that are currently on the map.
Is this possible with what the Google Maps API offers by default or do I need to resolve to build this myself?
I used fitBounds (API V3) for each point:
Declare the variable.
var bounds = new google.maps.LatLngBounds();
Go through each marker with FOR loop
for (i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
bounds.extend(latlng);
}
Finally call
map.fitBounds(bounds);
There are a number of ways of doing this but it is pretty easy if you are using the V2 API. See this post for an example, this group post or this post.
For V3 there's zoomToMarkers
Gray's Idea is great but does not work as is. I had to work out a hack for a zoomToMarkers API V3:
function zoomToMarkers(map, markers)
{
if(markers[0]) // make sure at least one marker is there
{
// Get LatLng of the first marker
var tempmark =markers[0].getPosition();
// LatLngBounds needs two LatLng objects to be constructed
var bounds = new google.maps.LatLngBounds(tempmark,tempmark);
// loop thru all markers and extend the LatLngBounds object
for (var i = 0; i < markers.length; i++)
{
bounds.extend(markers[i].getPosition());
}
// Set the map viewport
map.fitBounds(bounds);
}
}