Question

我接着通过一个TheNewBoston.com教程，为我的网站制作html5的视频播放器，并且除了点击进度条的一部分并更改视频的时间之外，其他一切都有效。这是我的HTML代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Vansh's Website</title>
  <link rel="stylesheet" href="main.css">
  <script src="main.js"></script>
</head>
<body>
  <div id="big_wrapper">

    <header id="top_header">
      <h1 id="titlefont">Welcome to Vansh's Website</h1>
    </header>

    <nav id="top_menu">
      <ul>
        <li>Home</li>
        <li>Tutorials</li>
        <li>Podcasts</li>
      </ul>
    </nav>

    <div id="new_div">

      <section id="main_section">
        <article>
          <header>
            <hgroup>
              <h1>Title of Article</h1>
              <h2>Subtitle of Article!</h2>
            </hgroup>
          </header>
          <p>This is the best article eva!</p>
          <footer>
            <p>- written by Vansh Juneja</p>
          </footer>
        </article>

        <article>
          <header>
            <hgroup>
              <h1>Title of Article 2</h1>
              <h2>Subtitle of Article 2!</h2>
            </hgroup>
          </header>
          <p>This is the second best article eva!</p>
          <footer>
            <p>- written by Vansh Juneja</p>
          </footer>
        </article>

        <section id="skin">
          <video id="myMovie" width="620" height="413" src="https://lh3.googleusercontent.com/4MRLae42DP7lrQ3zhtXJuXCtCdvx3YSvkht73OvmTCgxVzeWjSxQEGUhaUXRKUPJH6SSstqPbjgvndAVIoWUQ0IEdLCnYx30bWiFbNAg0iugVz8hsekQyQoCuAclsxHkDHyqH2cm_P_xhccTnmLk4f-Z0S67DMAq-Vn5N66R5qsoTXzdFPfYOW7KGdpuvD_6U7CCIdbSs-4f7HpSCKpb6sVbRkwwNq267S9addvOHoGWqc2_bHhZHW0y1r2fQTor3t8QN7F_zWKc40AkSIoOvRt2epnrsroFlr0iY0zhRwKmZZXZH6mM-skYrjnT1-6Z1SuviCNeoyb6Pq75HkSa3EKUnYV835JcoqFVlpDXlRtcOREI1s-wKoIJWZJJ2IQ4FXzbPrWwt5p93fEdfIK5_eGLGBnhT11qybBfMvfyVastwcAcQZ2YxBzzMaGbXKXgi8O1hBFmnSDLpWVYwW31RUtTPvOaUfxKCFgfm2idfsurSns8AYFhWPjTcWTDnNYLlH5nyRSXiPp1Lr-ReaTe3QlwvdapjHCQFfwrkVN-FBtoV3Hnl-K2UFVCjguiORGUt3Q-fnCkZKgh1D3FHplZGELNA_cP3ao=m37?cpn=DH2IqSKT4rysRDp8&amp;c=WEB&amp;cver=1.20160714"></video>
          <nav id="videonav">
            <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>
      </section>

      <aside id="side_bar">
        <h4 id="boldfont">News</h4>
        <p>Vansh has a new dog!</p>
      </aside>

    </div>

    <footer id="footer_bar">
      <p>Copyright © 2016 Vansh. All Rights Reserved.</p>
    </footer>

  </div>
</body>
</html>

这是我的CSS：

*{
  margin: 0px;
  padding: 0px;
}

h1{
  font: bold 20px Tahoma;
}

h2{
  font: bold 14px Helvetica;
}

p{
  font: lighter 14px Helvetica
}

#boldfont{
  font: bold 16px helvetica;
}

#titlefont{
  font: bold 25px Tahoma;
}

header, section, footer, aside, nav, article, hgroup{
  display:block;
}

body{
  width: 100%;
  display: -webkit-flex
  -webkit-box-pack: center;
  background: lightblue;
  text-align: center;
}

#big_wrapper{
  max-width: 1000px;
  margin: 20px auto;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-flex: 1;
  background:lightyellow;
}

#top_header{
  text-align: center;
  padding: 20px;
  background:darkslategray;
  color:white;
}

#top_menu{
  text-align: center;
  background: darkorange;
  color: white;
}

#top_menu li{
  margin: 2px 15px;
  font: lighter 14px Helvetica;
  display: inline-block;
  list-style:none;
  padding: 7px;
  -webkit-transition: -webkit-transform 0.5s;
}

#top_menu li:hover{
  cursor: pointer;
  -webkit-transform: scale(1.5);
}

#new_div{
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

#main_section{
  -webkit-box-flex: 1;
  margin: 20px;
  padding: 20px;
  text-align: left;
}

#side_bar{
  -webkit-flex: 1;
  flex: 1;
  margin: 30px 10px;
  padding: 30px;
  margin-right: 30px;
  background: lightgray;
  border: 1px solid darkgray;
  -webkit-border-radius: 5px;
}

#footer_bar{
  text-align: center;
  padding: 20px;
  border-top: 1px solid lightgreen;
  background: lightgoldenrodyellow
}

article{
  background: peachpuff;
  border: 1px solid lightsalmon;
  padding: 20px;
  margin-bottom: 15px;
}

article footer{
  text-align: right;
}

video{
  border: 1px solid black;
  background: black;
}

#skin{
  text-align: center;
  width: 500;
  margin: 20px auto;
  padding: 20px;
  background: lightsteelblue;
  border: 1px solid lightseagreen;
  -webkit-flex: 1;
  -webkit-border-radius: 5px;
}

#videonav{
  margin: 5px 0px;
}

#buttons{
  padding-top: 5px;
  float: left;
  width: 70px;
  height: 22px;
  -webkit-flex: 1;
}

#defaultBar{
  position: relative;
  float: left;
  width: 575px;
  height: 20px;
  margin-top: 5px;
  margin-left: -10px;
  background: darkolivegreen;
}

#defaultBar:hover{
  cursor: pointer;
}

#progressBar{
  position: absolute;
  width: 0px;
  height: 16px;
  background: goldenrod;
  margin: 2px;
  border-right: 2px solid darkred;
}

这是我的JS：

function doFirst(){
  barSize=575;
  myMovie=document.getElementById('myMovie');
  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(!myMovie.paused && !myMovie.ended){
    myMovie.pause();
    playButton.innerHTML='Play';
    window.clearInterval(updateBar);
  }else{
    myMovie.play();
    playButton.innerHTML='Pause';
    updateBar=setInterval(update, 500);
  }
}

function update(){
  var size=parseInt (myMovie.currentTime*barSize/myMovie.duration);
  if(!myMovie.ended){
    progressBar.style.width=size+'px';
  }else{
    progressBar.style.width=size+'px';
    playButton.innerHTML='Play';
    window.clearInterval(updateBar);
  }
}

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

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

Answer 1

您正在错误地设置点击事件

defaultBar.onclick=clickedBar('click', clickedBar, false);

应该是

defaultBar.addEventListener('click', clickedBar, false);

就像上一行将事件监听器添加到播放按钮

一样

在您自己的html5视频播放器中浏览视频

1 个答案: