未捕获（在promise中）DOMException：play（）请求被pause（）

Question

我想显示/删除带有html5视频标记的视频弹出窗口 在页面上，我有

<h5 onclick="playVideo(url, title)">Video title</h5>
 <div class="video" style="display:none"></div>

脚本：

var isPlaying = false;
var isOnPause = true;

function onPlaying() {
    console.log("onplaying");
    isPlaying = true;
    isOnPause = false;
}

function onPause() {
    console.log("onpause");
    isPlaying = false;
    isOnPause = true;
}

function closevideo() {
    var video = document.getElementById("video1");
    if (!video.paused && !isOnPause) {
        video.pause();
    }       
    $('.video').html('');  << will generate error Uncaught (in promise)...
    $('.video').hide();
}

function playVideo(src, title) {
    var video = document.getElementById("video1");
    if (video) {
        while (video.firstChild) {
            video.removeChild(video.firstChild);
        }
        var source = document.createElement('source');
        source.setAttribute('src', src);
        video.appendChild(source);
        if (video.paused && !isPlaying) {
            video.play();
        }
    }
    else {
        var videoSection = '<span style="color:white;float:left">' + title + '</span>' +
                         '<button onclick="closevideo()" title="đóng"><i class="fa fa-times"></i></button><div class="clearfix"></div><video id="video1" onplaying="onPlaying()" onpause="onPause()" controls preload="none" width="480" height="240"></video>';
        $('.video').html(videoSection);
        $('.video').show();
        playVideo(src);
    }
}

问题是如果我让用户自己点击播放按钮，那么他可以点击关闭按钮（closevideo）就好了。但如果我像上面那样设置，自动播放，然后在视频尚未加载时单击关闭按钮，然后控制台显示："Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()."