javascript - HTML5视频自定义控件

我正在尝试向html 5视频中添加一些自定义控件，但是在使其正常工作时遇到了问题。

我需要添加一个切换按钮“暂停和播放”。这是我的代码的一部分
并且我得到的错误是未捕获的TypeError：无法将属性'title'设置为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(); }

谢谢

最佳答案

详细说明在摘录内的注释中。

SNIPPET

    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> 

关于javascript - HTML5视频自定义控件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37474083/