Question

我试图将存储在我本地驱动器上的视频播放到正在制作的网页上播放。我尝试在三个浏览器中打开页面，但它从未显示（更喜欢chrome）。我直接在chrome中运行视频（mp4），它们都可以正常工作。所以这不是一个支持问题。下面我附上了我的HTML和JS。有与此相关的CSS但我不明白为什么会导致任何播放问题。我已经在这里待了几个小时，现在相当困难。另外，我使用Aptana进行开发并从那里运行它。

以下是完整的代码，如果有人想看看：http://jsfiddle.net/pGzTR/

这是我用过的HTML：

<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”这是引用html和视频文件所在的文件夹。

这是我用于功能的javascript

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

请确保您为MIME中的.MP4或您用于托管网站的任何服务添加了IIS类型。

编辑：

请确保MP4文件路径正确无误。在查看截图后，这对我来说似乎是一个问题。

Answer 2

您需要在<source>标记中定义视频的mime类型。

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

视频.mp4不会在任何浏览器中显示

2 个答案: