I have a video with a poster image and overlay content. The video requests full screen when user clicks custom play button. If the user exits full screen, the video is reloaded and the overlay content returns. Everything is working great except the poster image is not returning. Can anyone help me with this?
The javascript/jQuery is:
var featuredButton = $('.featured-panel .play img');
var featuredOverlay = $('.featured-panel .overlay-content');
var featuredVideo = $('.featured-video');
var featuredDown = $('.featured-panel .down');
// when clicking play button
featuredButton.on('click', function() {
// hide play button
$(this).hide();
// hide down button
featuredDown.hide();
// hide overlay content
featuredOverlay.fadeOut();
// play the video
$(this).parent().siblings(featuredVideo)[0].play();
if (win.width() > 1024) {
// vv This will automatically request full screen, consider using this and then returning to default poster view when full screen is exited
$(this).parent().siblings(featuredVideo)[0].webkitRequestFullScreen();
$(this).parent().siblings(featuredVideo)[0].mozRequestFullScreen();
}
});
featuredVideo.bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
if (event == "FullscreenOff"){
//do something when fullscreen off
featuredVideo.load();
featuredOverlay.fadeIn();
featuredButton.show();
}
});
Aucun commentaire:
Enregistrer un commentaire