Добавление 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(); 
    } 
}

Я хотел бы поставить крестик в правом верхнем углу видео, при нажатии, имитирующий нажатие клавиши побег или вызывает метод JavaScript. Может ли кто-нибудь дать мне пример этого?

источник

2016-09-13 Nick Gilbert

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

Спасибо за ссылку. Однако у меня уже есть метод JS для выхода из полноэкранного режима. Я хочу добавить X в верхний правый угол, который вызывает мой метод, чтобы закрыть его при щелчке. –

Я сделал что-то подобное некоторое время назад, я закончил создание контейнера div fullScreen вместо тега видео и имел видео с шириной и высотой 100% на этом div, , тогда вы можете позиционировать другие элементы внутри div , просто используйте положение: абсолютное/относительное на контейнере и наложенные элементы

источник

2016-09-13 18:35:07 StackOverMySoul

Понял, спасибо! –

Добавление X в верхний правый угол полноэкранного видео HTML5

ответ

Смежные вопросы