全屏JS API

Question

嗨，我想添加一个带有JS元素的全屏按钮，如何添加带有JS的全屏请求的按钮

该按钮位于代码的末尾，js将其替换在标记元素之间

问题是当标记元素是3/5秒延迟的加载时，强制重新加载脚本并刷新。

var requestFullscreen = function (ele) {
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
    } else {
        console.log('Fullscreen API is not supported.');
    }
};

var exitFullscreen = function () {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else {
        console.log('Fullscreen API is not supported.');
    }
};




var fsDocButton = document.getElementById('fs-doc-button');
var fsExitDocButton = document.getElementById('fs-exit-doc-button');

fsDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(document.documentElement);
});

fsExitDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    exitFullscreen();
});




var fsVidButton = document.getElementById('btn player__video-unmute-btn');
var video = document.getElementById('video');

fsVidButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(video);
});



var fsImgButton = document.getElementById('fs-img-button');
var image = document.getElementById('image');

fsImgButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(image);
});

function myClick() {
  setTimeout(
    function() {

    var button = document.createElement("button");
        button.style.cssText = 'position:absolute; margin-left:230px; top:20px; bottom:0px;padding:8px;height:100px;z-index:1000;white-space:nowrap;color:#c6c6c7;text-align:justify;';
    button.id='fs-vid-button';
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.GetElementByClassName('player__video-wrap');
body.appendChild(button);
 }, 5000);
}

<div class="player__video-wrap">
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</div>

完整代码：https://jsfiddle.net/yq9L18rf/