自分のhtml5ビデオプレーヤーでビデオをスキップ

私は自分のウェブサイトのビデオプレーヤーをhtml5にするためのTheNewBoston.comチュートリアルに続き、進行状況バーの一部をクリックして時間を変更する以外の動画ここではHTMLでの私のコードは次のとおりです。自分のhtml5ビデオプレーヤーでビデオをスキップ

<!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);

出典

2016-07-20 Vansh03

あなたは間違って

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

をクリックイベントを設定しています

ちょうど前の行のような

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

再生ボタンに

出典

2016-07-20 00:36:24

をイベントリスナーを追加するため申し訳ありませんが、それをオリジナルのだったが、私はそれを修正するだろうかどうかをテストするために.onclickに変更されました。 .addEventListenerに変更しましたが、まだ動作していないようです。助言がありますか？ – Vansh03

あなたが言っていたことは気にせず、私はvar mouseX = e.pageX-bar.offsetLeftを変更しなければなりませんでした。 to var mouseX = e.offsetX; – Vansh03

自分のhtml5ビデオプレーヤーでビデオをスキップ

答えて

関連する問題