如何在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事件执行相同操作：< / p>

   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>

注意：我将视频路径更新为实际在线可用的路径，以显示视频在上述指定的更改后有效。