帶有eventListener的Javascript代碼不適用於視頻按鈕控制系統

有人向我發送了一個代碼，我試圖運行它。問題是Javascript文件無法正常工作。結果必須是我的視頻的按鈕控制系統。我希望有人可以看看它。帶有eventListener的Javascript代碼不適用於視頻按鈕控制系統

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>dfdfs</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script type="text/javascript" src="main.js"></script> 
</head> 
<body> 

<!-- Simplified the markup a little, less is more --> 
<div id="p1"> 
    <a href="#/" id='b1' class='play'> </a> 
    <video id="v1"> 
      <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> 
    </video> 
</div> 

</body> 
</html>

CSS：

/* This container wraps neatly around 
|| the video's width 
*/ 

#p1 { 
    position: relative; 
    display: table-cell; 

} 


/* This is to make the button an overlay */ 

#b1 { 
    font-size: 100px; 
    color: rgba(0, 255, 255, .3); 
    position: absolute; 
    z-index: 1; 
    height: 100px; 
    width: 100px; 
    top: calc(50% - 50px); 
    left: calc(50% - 50px); 
    text-decoration: none; 
} 


/* These two rulsets use simple HTML entities 
|| for play/pause buttons 
*/ 

.play::after { 
    content: '\25b6'; 
} 

.pause::after { 
    content: '\23f8'; 
}

JAVASCRIPT：

// Reference button and container 
var btn1 = document.getElementById('b1'); 
var pyr1 = document.getElementById('p1'); 

// When button is clicked... 
btn1.addEventListener('click', function(event) { 

    // Reference video 
    var vid1 = document.getElementById('v1'); 

    // Conditions based on state: paused 
    if (vid1.paused) { 
    vid1.play(); 
    } else { 
    vid1.pause(); 
    } 
    /* Whatever the new state is doesn't matter if... 
    || we have either .play or .pause class on button 
    || previously and that both classes will toggle 
    || at the same time. 
    */ 
    btn1.classList.toggle('play'); 
    btn1.classList.toggle('pause'); 
}, false); 

// If the mouse leaves the area of container... 
pyr1.addEventListener('mouseout', function(event) { 

    // If the button has the class .pause... 
    if (btn1.classList.contains('pause')) { 

    // set it's opacity to 0 
    btn1.style.opacity = 0; 

    // and make it fade away 
    btn1.style.transition = '1s ease'; 
    } 
}, false); 

// If the mouse enters the container's area... 
pyr1.addEventListener('mouseover', function(event) { 

    // if the button has the class .pause... 
    if (btn1.classList.contains('pause')) { 

    // set it's opacity to 1 
    btn1.style.opacity = 1; 

    // and make it fade in 
    btn1.style.transition = '1s ease'; 
    } 
}, false);

來源

2017-02-23 Soccerlife

究竟是什麼工作？ –

該腳本在DOM準備好之前執行。將'

你能否提供更多的細節，當你說

Javascript文件無法正常工作。

它被加載到瀏覽器中嗎？有沒有控制檯錯誤？

來源

2017-02-23 17:05:22 marchWest

之前。如果我點擊播放視頻的按鈕，它不會執行任何操作。所以我認爲javascript文件根本沒有運行 – Soccerlife

您是否嘗試過使用瀏覽器開發工具在回調中放置斷點或添加'console.log（「clicked！」）'語句以確保它正在執行？ – marchWest

另外，JavaScript沒有被封裝在'documentReady'回調函數中，所以在加載HTML文檔的其餘部分之前可能/可能執行。這意味着它試圖綁定到尚不存在的元素。 – marchWest

相關問題