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

Question

我正在设计一个带有视频横幅的网站，按下播放按钮后，会使用 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 方法。有人可以给我一个这样做的例子吗？

Answer 1

我不久前做了类似的事情，我最终制作了一个 div 容器全屏而不是视频标签，并且在该 div 上将视频设置为 100% 宽度和高度，然后你可以在div内定位其他元素，只需在容器和覆盖的项目上使用position:absolute/relative