ローカル ドライブに保存されているビデオを取得して、作成中の Web ページで再生しようとしています。3 つのブラウザーでページを開こうとしましたが、表示されません (Chrome を優先)。動画 (mp4) を chrome で直接実行しましたが、すべて動作します。したがって、サポートの問題ではありません。以下に、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);