Video .mp4 won't show in any browser

Question

Im trying to get videos stored on my local drive to play on a webpage im making. I've tried opening the page in in three browsers but it never shows (prefer chrome). I've run the videos (mp4) directly in chrome and they all work. So it's not a support issue. Below I've attached my HTML and JS. There's CSS associated with this but I don't see why that would cause any playback issues. I've been at this for hours, pretty stuck right now. Also, Im using Aptana for development and running it from there.

Here is the complete code if anyone wants to take a look: http://jsfiddle.net/pGzTR/

This is the html I've used:

<section id="main_section">
    <video id="myMovie" width="320" height="180">
        <source scr="a1/db.mp4"/>
    </video>
    <nav id="video_nav">
        <div id="buttons">
            <button type="button" id="playButton">Play</button>
        </div>
        <div id="defaultBar">
            <div id="progressBar"></div>
        </div>
        <div style="clear: both"></div>
    </nav>                        
</section>

scr="a1/db.mp4" This is referencing the folder where the html and video files reside.

This is the javascript im using for the functionality

function doFirst(){
    barSize = 600;
    myMovie = document.getElementById('myMovie');
    playButton = document.getElementById('playButton');
    bar = document.getElementById('defaultBar');
    progressBar = document.getElementById('progressBar');   
    playButton.addEventListener('click', playOrPause, false);
    bar.addEventListener('click', clickBar, false);

}
function playOrPause(){
        if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
        updateBar=setInterval(update, 700)
    }
}
function update(){
    if(!myMovie.ended){
        size = parseInt((myMovie.currentTime*barSize)/myMovie.duration);
        progressBar.style.width = size +'px';
    }else{
        progressBar.style.width='0px';
        playButton.innerHTML='Play';
        window.clearInterval(updateBar);
    }
}
function clickBar(e){
    if(!myMovie.paused && !myMovie.ended){
        mouseX=e.pageX-bar.offsetLeft;
        newTime=mouseX*myMovie.duration/barSize;
        myMovie.currentTime=newTime;
        progressBar.style.width=mouseX+'px';
    }
}

window.addEventListener('load',doFirst,false);

Answer 1

Please ensure you have MIME type added for .MP4 in IIS or whatever service you are using to host the website.

EDIT:

Please ensure that MP4 file path is correct. That seems as a problem to me in after looking at your screenshot.