Develop Reference

Play three audio in sequence and collect response javascript

I'd like to know whether it's possible to play three audio files one after the other and having a participant clicking on a button (perhaps a speech bubble) indicating the audio file he wants to select. Everything while an image is displayed constantly at the bottom (or top I really don't care about that).
IMPORTANT: I'd like each audio + speech bubble to appear together one at a time and stay on the monitor until the last sound has been played.
I have a drawing of what I mean:
A plus is to make it possible with some jsPsych plugin!
Please help me guys!
UPDATE, problem solved !
The main idea is to give up on the for loop, or providing a whole vector ideas and specify each audio as an independent trial, and concatenate the trials into a bigger "task".
The solution came from the main JsPsych group.
experiment: [];
var trial1 = {
type: 'audio-button-response',
stimulus: 'audio1.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial2 = {
type: 'audio-button-response',
stimulus: 'audio2.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial3 = {
type: 'audio-button-response',
stimulus: 'audio3.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
response_ends_trial: true,
prompt: "<img src='stimImage.jpg'>",
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000,
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
var task = {
timeline: [fixation_trial, trial1, trial2, trial3]
};
experiment.push(task);
jsPsych.init({
timeline: experiment,
})

Although the examples of jsPsych about audio are not abundant, I did manage to find this example which loops images until a button is pushed and implemented the same logic to your audio files.
I'm not sure if the speech bubbles will appear at the correct moment, but altering the object in the audio_trials.push() method to include each image with each audio file, might solve it.
var audio = ['dep.mp3', 'dep.mp3', 'dep.mp3'];
var audio_trials = [];
for (let i = 0; i < audio.length; i++) {
audio_trials.push({
stimulus: audio[i]
});
}
var audio_trial = {
type: 'audio-button-response',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
prompt: "<p>Click on the correct speech bubble</p>",
button_html: '<img src="%choice%" style="width: 300px"/>',
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
timeline: audio_trials
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000, // here there is the random variation
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
jsPsych.init({
timeline: [fixation_trial, audio_trial],
use_webaudio: true
});

How to addRemoteTextTrack programmatically in videojs

I am using videojs and wanna add captions from a URL. But player does not do as expected.
My code is as below.
HTML
<video id="media-player" class="video-js vjs-default-skin">
</video>
JavaScript code
let videoOption = {
controls: true,
autoplay: true,
fluid: true,
preload: 'auto',
poster: 'http://remote-url/1.png',
sources: [{
src: 'http://remote-url/1.mp4',
type: 'video/mp4'
}]
};
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: 'http://remote-url/1.vtt'
};
const player = videojs('media-player', videoOption);
player.addRemoteTextTrack(captionOption); // palyer does not load caption
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0

After searching hours of internet. Finally found this useful answer. #Xi Xiao's print out comment is mistyping, it should be a number more than 0.
So after you add
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0
Then you can turn on the caption button by
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
if(track.kind==='captions' && track.language === 'eng') {
track.mode = 'showing';
}
}
}
All of these code are in the ready block.

It turns out that ready function is needed before any API call.
let player = videojs('media-player', videoOption);
player.ready(function () {
player.addRemoteTextTrack(captionOption);
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0
});

I've built a HTML-5 "video-js"-based page that implements soft-subtitling
(using VTT).
You may want to view-source on it, and see if any of that coding
is useful to your effort. The page is here:
http://weasel.firmfriends.us/Soft-VTT-Cloud/

jPlayer jPlayerAndroidFix not working?

I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0

VideoJS player overlay buttons in touch devices

I am using VideoJs player 4.2
When i open a videojs player in safari browser in ios device , it works on native controls by default . When i pause the player, i display overlay buttons (links to go for other page) on video . If i click buttons it does not fire in ios . It works well in desktop browsers .
If i set nativeControlsForTouch to false it displays custom controls . Here overlay buttons and custom controls works but it will be sluggish and i am not able scroll over video and it will be not smooth as compared with native controls .
Please suggest me any idea
If i use native controls , then overlay buttons has to work
If i use custom controls , then video player will be as smooth as compared with native controls
Here is my code
videojs("ex_video",{"controls":true, "preload":"metadata","width":"auto", "height":"auto",
"poster":"/images/test.png"},function(){
var current_player=this;
current_player.imageOverlay({
opacity: 0.5,
height: '100%',
width: '50%'
});
current_player.on("pause", function(){
current_player.bigPlayButton.show();
});
current_player.on("play", function(){
current_player.bigPlayButton.hide();
});
});
overlay button code
(function(vjs) {
var
extend = function(obj) {
var arg, i, k;
for (i = 1; i < arguments.length; i++) {
arg = arguments[i];
for (k in arg) {
if (arg.hasOwnProperty(k)) {
obj[k] = arg[k];
}
}
}
return obj;
},
defaults = {
image_url: '',
click_url: '',
start_time: null,
end_time: null,
opacity: 0.7,
height: '15%',
width: '100%'
},
imageOverlay = function(options) {
var player = this,
settings = extend({}, defaults, options || {}),
showingImage = false;
if (settings.start_time === null)
settings.start_time = 0;
if (settings.end_time === null)
settings.end_time = player.duration() + 1;
overlay = {
showImage: function() {
if (showingImage) {
return;
}
showingImage = true;
var holderDiv = document.createElement('div');
holderDiv.id = 'vjs-image-overlay-holder';
holderDiv.style.height = settings.height;
holderDiv.style.width = settings.width;
holderDiv.style.opacity=settings.opacity;
var overlayLbl1= document.createElement('label');
overlayLbl1.setAttribute('class','heading-overlay-video');
overlayLbl1.innerHTML= "Like this class? Why not:";
var topVideoP=overlay.createEl(overlayLbl1);
topVideoP.className=topVideoP.className+' top-video-control-overlay';
holderDiv.appendChild(topVideoP);
//Save to queue
var overlayBtn1=document.createElement('button');
overlayBtn1.value = 'Save to queue';
overlayBtn1.innerHTML='Save to queue';
overlayBtn1.setAttribute('class','white medium');
holderDiv.appendChild(overlay.createEl(overlayBtn1));
//Add to series button
var overlayBtn2=document.createElement('button');
overlayBtn2.value = 'Add to series';
overlayBtn2.innerHTML='Add to series';
overlayBtn2.setAttribute('class','white medium');
holderDiv.appendChild(overlay.createEl(overlayBtn2));
var overlayLbl2= document.createElement('label');
overlayLbl2.innerHTML= "music credits";
overlayLbl2.setAttribute('class','msg-blue');
var btmVideoP=overlay.createEl(overlayLbl2);
btmVideoP.className=btmVideoP.className+' bottom-video-control';
holderDiv.appendChild(btmVideoP);
player.el().appendChild(holderDiv);
},
hideImage: function() {
if (!showingImage) {
return;
}
showingImage = false;
player.el().removeChild(document.getElementById('vjs-image-overlay-holder'));
},
createEl:function(ele_obj){
var overlayP=document.createElement('p');
overlayP.setAttribute('class','overlay-video-content-in');
overlayP.appendChild(ele_obj);
return overlayP ;
}
};
var setTimeoutControl;
player.on('pause', function(){
setTimeoutControl= setTimeout(function(){overlay.showImage()},5000);
});
player.on('play', function(){
clearTimeout(setTimeoutControl);
overlay.hideImage();
});
};
vjs.plugin('imageOverlay', imageOverlay);
}(window.videojs));

By default HTML5 video in browser will open in native player in iPod,IPhone.
You have to wrap the HTML content in webview and run it like a native application to view video in iPod,Iphone.
See this HTML5 inline video on iPhone vs iPad/Browser
So these two changes has to be done HTML
<video id="xxx" width="xx" height="xx" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
In all other devices it will work fine with out these

It is better to use HammerJS(https://github.com/hammerjs/hammer.js). For EmberJS we have an add-on https://github.com/runspired/ember-gestures

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'