Develop Reference

swiper.js controlling two instances

So I have setup two swiper.js instances and I want to scroll both while using one of them.
EDIT: My main goal is to recreate the main functionality on top of the swiper homepage.
EDIT2: I found this link, but it appears that this uses an older version of swiper.
Here is my config, only the first one works.
$(document).ready(function () {
//initialize swiper when document ready
var swiperFront = new Swiper('.swiper-container-front', {
// Optional parameters
effect: 'coverflow',
centeredSlides: true,
direction: 'horizontal',
slidesPerView: '3',
loop: false,
followFinger: true,
controller: {
control: [swiperFront, swiperBack],
by: 'container',
}
});
var swiperBack = new Swiper('.swiper-container-back', {
// Optional parameters
effect: 'fade',
centeredSlides: true,
slidesPerView: '3',
loop: false,
});
swiperFront.params.controller.control = swiperBack;
swiperBack.params.controller.control = swiperFront;
})
What am I doing wrong, and how to fix it?
Fiddle

I think the main problem here was the outdated swiper.js version. Updated to 4.3.2.
jsfiddle: https://jsfiddle.net/ajxmyL7v/

For documentation reasons.
For this case the main difference in switching from Swiper v3 to v4 is to omit the .params. So instead of
mySwiper.params.control
without params and the new API
mySwiper.controller.control

How to take screenshot of game div in phaser

I am using this code now, but it returns a blank transparent image:
$(document).ready(function(){
$("#t").click(function() {
html2canvas(document.querySelector("#bracelet_maker"),
{ onrendered: function(canvas){
src = canvas.toDataURL();
window.open(src); } });
});
});
If I use game.canvas.toDataUrl(); it returns a black image.
This is how the game is started in #bracelet_maker div
var game = new Phaser.Game(width,height,Phaser.AUTO,"bracelte_canvas",{
preload:preload,
create:create,
update:update });

Using Phaser.AUTO will allow either Phaser.WEBGL or Phaser.CANVAS be used, depending upon what your browser supports.
If you switch over to Phaser.CANVAS when creating your new Phaser.Game you should be able to use access the canvas.
For example, within Phaser by binding off the S key:
function create() {
// ...
var screenshotKey = game.input.keyboard.addKey(Phaser.Keyboard.S);
screenshotKey.onDown.add(function () { window.open(game.canvas.toDataURL());
}
There's also preserveDrawingBuffer which should allow you capture from WebGL as well, but it needs to be set early on in the process.
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
preload: preload, create: create, update: update
});
game.preserveDrawingBuffer = true;

Changing video tag source video.js

I am working on a HD button, so I have to reload the video and play it when it stops. So first, I am trying to load the HD file.
I've already read a lot of things about changing the source of the video tag. My code is working with FireFox and Internet Explorer, but not with Chrome :
vjs.HdToggle.prototype.onClick = function() {
var mp4Vid = document.getElementById('mp4Source');
var webmVid = document.getElementById('webmSource');
var oggVid = document.getElementById('oggSource');
this.player_.pause();
$(mp4Vid).attr('src', './test.mp4');
$(webmVid).attr('src', './test.webm');
$(oggVid).attr('src', './test.ogg');
this.player_.load();
this.player_.play();
}
I don't know what I have to do to make it work with Chrome. Does somebody have an idea ?
Thank you, Lea.

You should use src() to update the sources.
this.player_.src([
{ type: "video/mp4", src: "/test.mp4" },
{ type: "video/webm", src: "/video.webm" },
{ type: "video/ogg", src: "/test.ogv" }
]);
https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#src-source-
You might also find this existing plugin useful: https://github.com/vidcaster/video-js-resolutions

Configure VideoJS Flash fallback

Since Firefox doesn't allow me to use an .mp4 file in the <video>-tag, I have to use the Flash-fallback on my VideoJS player.
For Chrome, Safari and IE, I can configure my VideoJS player with javascript to do pretty much anything. For example I like to loop it 5 times, hide the controls and mute the video. No issue there for the HTML5 version:
// Initialize the video with some settings
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
// Set the counter
var loop_count = 1;
// Function to loop the video exaclty 5 times
var loopInstagramVideo = function() {
if (loop_count <= 5) {
myVideo.play();
loop_count++;
} else {
loop_count = 1;
}
};
// Function to manipulatie the playing video (mute, no controls,...)
var setVideoOptions = function() {
myVideo.muted(1);
myVideo.controls(0);
};
// Set functions on the video
myVideo.on("play", setVideoOptions);
myVideo.on("ended", loopInstagramVideo);
So I would like to do the same for the Flash version.
The code above is generating an error on the videojs-call with the error:
TypeError: The element or ID supplied is not valid. (videojs)
Any thoughts on how to tackle this issue?

While this isn't an answer for your "looping" question, I just myself discovered that after calling videojs() on an element, the ID changes. Whether it's the ID of the element changes or the focus of the videojs call changes I don't know. The error pertaining to the ID not being valid is being caused by your first and second videojs() calls.
I would change this:
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
To this:
var myVideo = videojs(videoID);
myVideo.controls = false;
myVideo.autoplay = false;
myVideo.preload = "auto";
OR put those properties in the video tag itself.

How to change video (and start playing immediately) in Flowplayer via Javascript?

It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.

See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>

See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);

$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.

You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'