Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

Question

I want to show/remove a video popup with html5 video tag On the page, I have

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

Script:

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);
    }
}

The problem is if I let users click on Play button himself, then he can click on close button(closevideo) just fine. But if I set like above, auto play, then click the Close button while the video is not yet loaded, then console shows: "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()."