在 HTML5 全屏视频的右上角添加 X答案

【问题标题】：Adding an X to upper right hand corner of HTML5 fullscreen video在 HTML5 全屏视频的右上角添加 X
【发布时间】：2016-09-13 18:20:40
【问题描述】：

我正在设计一个带有视频横幅的网站，该横幅在按下播放后会使用 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，当点击它时，模拟按 Esc 键或调用 JavaScript 方法。有人可以举个例子吗？

【问题讨论】：

stackoverflow.com/questions/19357854/…
感谢您的链接。但是，我已经有了退出全屏的 JS 方法。我想在右上角添加一个 X 来调用我的方法以在单击时关闭它

标签： javascript html video

【解决方案1】：

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

【讨论】：