The .mp4 video will not display in any browser.

I am trying to get videos stored on my local drive to play on im webpage. I tried to open the page in 3 browsers but it never shows (prefer chrome). I ran videos (mp4) right in chrome and they all work. So it's not a support issue. Below I have attached my HTML and JS. There's CSS related to this, but I don't understand why it might cause playback problems. I've been at this for hours, pretty stuck right now. Also, Im using Aptana for development and launching it from there.

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

This is the html I 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 a link to the folder where the html and video files are located.

This is javascript im using for 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);

      

+3


source to share


2 answers


Please make sure you have the MIME

type added for .MP4

in IIS

or whatever service you use to host your website.

EDIT:



Make sure the path to the file is MP4

correct. This seems to be a problem for me after looking at your screenshot.

+1


source


You need to define the mime type of the video in the tag <source>

.



<source src="vid.mp4" type="video/mp4"></source>

      

0


source







All Articles