將X添加到HTML5全屏視頻的右上角

我正在設計一個帶有視頻橫幅的網站，在播放時通過全屏幕使用HTML5播放器打開視頻。這是按下播放按鈕時調用的JavaScript。將X添加到HTML5全屏視頻的右上角

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方法的右上角。有人能給我一個這樣做的例子嗎？

來源

2016-09-13 Nick Gilbert

http://stackoverflow.com/questions/19357854/html5-exiting-video-fullscreen –

感謝您的鏈接。但是，我已經有一個JS方法來退出全屏。我想添加一個X到右上角，調用我的方法關閉它時點擊 –

前段時間我做了類似的事情，我最終制作了一個div容器fullScreen而不是視頻標籤，並且在該div上有100％寬度和高度的視頻，然後您可以將div中的其他元素，只是使用位置：絕對/相對的容器和覆蓋項目

來源

2016-09-13 18:35:07 StackOverMySoul

想通了，謝謝！ –

將X添加到HTML5全屏視頻的右上角

回答

相關問題