How to fix jittery audio/video on firefox when playback rate set to .5x using javascript?

228 views Asked by At

I am trying to set up an experiment in which I am playing .mp4 videos and changing the playback rates using base Javascript (no libraries) and HTML5 (Mac OSX 10.10.4). When I change the playback rate of a video to .5x, although the audio-video is slowed down, the audio sounds very jittery on Firefox (version 39.0.3). This problem is not so pronounced on Chrome (Version 44.0.2403.130, 64-bit), Safari (Version 8.0.7) or even IE (Version 11+). Is there a way I can make the make the audio for this video sound less noisy when using firefox?

<script type="text/javascript">
var videos = ['2.4.mp4', '3.2.mp4', '2.8.mp4']
var rates = [.5, 1, .5]
function setupStim(){
    stim = document.getElementById('movie');
     stim.addEventListener('loadeddata', function() {
        stim.defaultPlaybackRate = rates[trialNum];
        stim.playbackRate = rates[trialNum];
        stim.play();
        setTimeout(enableButtons,stim.duration*1000);
    }, false);
}

function Stimulus(trialNum, movieName,rate,response, rt) {
    this.trialNum = trialNum;
    this.movieName = movieName;
    this.rate = rate;
    this.response = response;
    this.rt=rt;
}

function playVideo(){
    hide('start');
    stim.src = "https://s3.amazonaws.com/mcgurkstimuli/" + videos[trialNum];
    document.getElementById('p3').innerHTML = (trialNum + 1)+ ' / '+ N;
    time0=performance.now();
    return time0;
}

function choice(resp){
    var time1 = performance.now();
    stim.rt = Math.round(time1-time0);
    stim.response = resp;
    videos[trialNum] = new Stimulus(trialNum,stim.src,rate,resp,stim.rt);
    videos[trialNum].rt = stim.rt;
    videos[trialNum].response = stim.response;
    videos[trialNum].movieName = stim.src;
    videos[trialNum].rate = stim.playbackRate;
    videos[trialNum].trial=trialNum;
    data +=videos[trialNum];
    document.getElementById("inputfields").innerHTML = data;
    trialNum++;
    if (trialNum<N){
        playVideo();
    }
    else {
        hideOptions();
        hide('movie');
    }
}
</script>

<p><button class="startButton" id="start" onclick="playVideo()" type="button">Begin Task</button>

    <video id="movie" onended="showOptions()"><source /></video>
</p>

Response

0

There are 0 answers