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