Как создать видеопроигрыватель в html 5?

Question

Мой видеопроигрыватель не работает, он не воспроизводится, когда я нажимаю кнопку воспроизведения. Я тестирую его на браузере Chrome.

Это мой код (я думаю, что проблема в части JS):

function dofirst() { 
 
    barSize = 500; 
 
    video = document.getElementById('video'); 
 
    playbutton = document.getElementById('playbutton'); 
 
    defaultBar = document.getElementById('defaultBar'); 
 
    progressbar = document.getElementById('progressbar'); 
 

 
    playbutton.addEventListener(click, PlayOrPause ,false); 
 
    defaultBar.addEventListener(click, clickedBar ,false); 
 
} 
 

 
function PlayOrPause() { 
 

 
    If(!video.paused && !video.ended){ 
 
    video.pause(); 
 
    playbutton.innerHTML = 'play'; 
 
    window.clearInterval(updatebar); 
 
    } else { 
 
    video.play(); 
 
    playbutton.innerHTML = 'pause'; 
 
    updatebar = setInterval(update,500); 
 
    } 
 
} 
 

 
function update(){ 
 
    if(!video.ended){ 
 
    var size= parseInt(video.currentTime*barsize/video.duration); 
 
    progressbar.style.width = size +'px'; 
 
    } else { 
 
    progressbar.style.width ='0px'; 
 
    playbutton.innerHTML = 'play'; 
 
    window.clearInterval(updatebar); 
 
    } 
 
} 
 

 
function clickedBar(e) { 
 
    If(!video.paused && !video.ended){ 
 
    var mouseX = e.pageX-bar.offsetLeft; 
 
    var newtiem = mouseX*video.duration/barSize; 
 
    myMovie.currentTime = newtime; 
 
    progressbar.style.width = mouseX+'px'; 
 
    } 
 
} 
 

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

body { 
 
    text-align: center; 
 
} 
 
#skin { 
 
    background: #5C6366; 
 
    width: 700px; 
 
    margin: 10px auto; 
 
    padding: 50px; 
 
    border: 2px black auto; 
 
    border-radius: 30px; 
 
} 
 
nav { 
 
    margin: 2px 0px; 
 
} 
 
#buttons { 
 
    float: left; 
 
    width: 70px; 
 
    height: 20px; 
 
    margin-left: 20px;/* 90px total 610 remaining*/ 
 
} 
 
#defaultBar { 
 
    margin-top: 5px; 
 
    position: relative; 
 
    width: 500px; 
 
    float : left; 
 
    height: 5px; 
 
    background-color: black; 
 
} 
 
#progressbar { 
 
    position: absolute; 
 
    width: 0px; 
 
    height: 5px; 
 
    background-color: white; 
 
}

<section id="skin" > 
 
    <video width=640px height=360px id="video" > 
 
    <source src="e:\dc\SampleVideo_1080x720_5mb.mp4" type="video/mp4"/> 
 
    </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>

Что не так? Что мне нужно исправить, чтобы заставить его работать?

Answer 1

Есть две ошибки, которые делают это не работает:

1. JavaScript учитывается регистр символов языка, и вы не используете правильный синтаксис для ключевого слова if (Вы писали If в двух разных местах):

   if(!video.paused && !video.ended){ 
   

2. Точно так же, что вы добавляете имя события в кавычки в addEventListener для load события, вы должны сделать то же самое для click событие:

   playbutton.addEventListener("click", PlayOrPause ,false); 
   defaultBar.addEventListener("click", clickedBar ,false); 
   

После того, как вы исправить эти две вещи, он будет работать. Вот код, с поправками:

function dofirst() { 
 
    barSize = 500; 
 
    video = document.getElementById('video'); 
 
    playbutton = document.getElementById('playbutton'); 
 
    defaultBar = document.getElementById('defaultBar'); 
 
    progressbar = document.getElementById('progressbar'); 
 

 
    playbutton.addEventListener("click", PlayOrPause ,false); 
 
    defaultBar.addEventListener("click", clickedBar ,false); 
 
} 
 

 
function PlayOrPause() { 
 
    if(!video.paused && !video.ended){ 
 
    video.pause(); 
 
    playbutton.innerHTML = 'play'; 
 
    window.clearInterval(updatebar); 
 
    } else { 
 
    video.play(); 
 
    playbutton.innerHTML = 'pause'; 
 
    updatebar = setInterval(update,500); 
 
    } 
 
} 
 

 
function update(){ 
 
    if(!video.ended){ 
 
    var size= parseInt(video.currentTime*barsize/video.duration); 
 
    progressbar.style.width = size +'px'; 
 
    } else { 
 
    progressbar.style.width ='0px'; 
 
    playbutton.innerHTML = 'play'; 
 
    window.clearInterval(updatebar); 
 
    } 
 
} 
 

 
function clickedBar(e) { 
 
    if(!video.paused && !video.ended){ 
 
    var mouseX = e.pageX-bar.offsetLeft; 
 
    var newtiem = mouseX*video.duration/barSize; 
 
    myMovie.currentTime = newtime; 
 
    progressbar.style.width = mouseX+'px'; 
 
    } 
 
} 
 

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

body { 
 
    text-align: center; 
 
} 
 
#skin { 
 
    background: #5C6366; 
 
    width: 700px; 
 
    margin: 10px auto; 
 
    padding: 50px; 
 
    border: 2px black auto; 
 
    border-radius: 30px; 
 
} 
 
nav { 
 
    margin: 2px 0px; 
 
} 
 
#buttons { 
 
    float: left; 
 
    width: 70px; 
 
    height: 20px; 
 
    margin-left: 20px;/* 90px total 610 remaining*/ 
 
} 
 
#defaultBar { 
 
    margin-top: 5px; 
 
    position: relative; 
 
    width: 500px; 
 
    float : left; 
 
    height: 5px; 
 
    background-color: black; 
 
} 
 
#progressbar { 
 
    position: absolute; 
 
    width: 0px; 
 
    height: 5px; 
 
    background-color: white; 
 
}

<section id="skin" > 
 
    <video width=640px height=360px id="video" > 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/> 
 
    </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>

Примечание: Я обновил видео путь к тому, который был на самом деле доступны в Интернете, чтобы показать, что видео работает после того, как указано выше изменения.