HTML5 視頻自定義控件

Question

我正在嘗試向我的 html 5 視頻添加一些自定義控件，但無法正常工作。

我需要添加一個切換按鈕暫停和播放。 這是我的代碼的一部分，我得到的錯誤是 Uncaught TypeError: Cannot set property 'title' of null

var billboardC, video, playpause;
var videoBGPlayer;

function init(){

    billboardC = document.getElementById('billboardC');

    video = document.getElementById('video-player');
    playpause = document.getElementById('playpause');
}


function OpenVideo(e){
    console.log('open video');
    billboardC.innerHTML += "<div class='closeButton'></div>";
    billboardC.innerHTML += "<a href='www.google.com' target='blank'     class='fombutton'>Find Out More</a>";
    billboardC.style.visibility = 'visible';
    billboardC.innerHTML += "<video id='video-player'     class='videoSquare' poster='' muted> <source src='my-video.mp4'     type='video/mp4' /></video><div id='controls'><button id='playpause'      onclick='togglePlayPause()' title='play'>Play</button></div>";

}

function togglePlayPause() {
    if (video.paused || video.ended) {
      playpause.title = "pause";
      playpause.innerHTML = "pause";
      video.play();
      console.log('play');
   }
   else {
      playpause.title = "play";
      playpause.innerHTML = "play";
      video.pause();
      console.log('pause');
   }
}


window.onload = function(){ init(); }

謝謝

Answer 1

詳細說明在代碼段內的評論中。

片段

 var billboardC = document.getElementById('billboardC'); var videoBGPlayer; /* The variables that were within init() were not accessible by other functions. Normally you would just place the variables outside to become global and accessible. But all of the elements do not exist until OpenVideo() is finished parsing them, so the variables are undefined. In order to create useful references, I placed the needed variables within togglePlayPause(). */ /* OpenVideo() was never invoked, therefore no HTML, no dice. So I placed OpenVideo within init() so it would be the first function (besides init() of course to be invoked. */ function init(){ OpenVideo(); } function OpenVideo(){ console.log('open video'); billboardC.innerHTML += "<div class='closeButton'></div>"; billboardC.innerHTML += "<a href='www.google.com' target='_blank' class='formbutton'>Find Out More</a>"; billboardC.style.visibility = 'visible'; billboardC.innerHTML += "<video id='video-player' class='videoSquare' poster='' muted> <source src='my-video.mp4' type='video/mp4'></video><div id='controls'><button id='playpause' onclick='togglePlayPause()' title='play'>Play</button></div>"; } function togglePlayPause() { var video = document.getElementById('video-player'); var playpause = document.getElementById('playpause'); if (video.paused || video.ended) { playpause.title = "pause"; playpause.innerHTML = "pause"; video.play(); console.log('play'); } else { playpause.title = "play"; playpause.innerHTML = "play"; video.pause(); console.log('pause'); } } /* When using window.onload = foo; do not use the functions parenthesis `()`. If you leave out the paranthesis, that will tell the renderer that it is up to it to decide when init should execute. */ window.onload = init;

 <!--#billboardC didn't exsist and it wasn't included in OpenVideo()--> <main id="billboardC"></main>