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，当点击它时，模拟按下转义键或调用JavaScript方法。有人能举例说明这件事吗？

Answer 1

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

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

1 个答案: