javascript - 在HTML5全屏视频的右上 Angular 添加X

我正在设计一个带有视频横幅的网站，按下播放按钮后，将使用HTML5播放器在全屏模式下打开视频。这是按下播放按钮时调用的JavaScript。

function addVideo() {
    var video = $(document).find('#intro-video')[0]; // find the newly inserterd video
    video.src = "../../assets/images/intro.mp4";
    video.controls = false;
    video.load();
    video.play();
    goFullscreen(video);
}

function goFullscreen(myVideo) {
    if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    } else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    } else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    } else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
    }
}

我想在视频的右上角放置一个X，单击该X时会模拟按下转义键或调用JavaScript方法。有人可以给我举个例子吗？

最佳答案

我前一阵子做了类似的事情，最终使一个div容器变为fullScreen而不是video标签，并且使该视频在该div上的宽度和高度为100％，
那么您可以在div内放置其他元素，只需使用position：容器和覆盖项上的绝对/相对

关于javascript - 在HTML5全屏视频的右上 Angular 添加X，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39476623/