I have developed a little system/series of videos (3 to be exact) in an iFrame. When the main index page is loaded, and after the user clicks the "play" button on the video (which is in that iFrame), that video plays, then it redirects to another video (in another .html file) that autoplays, and then when that is over, it redirects to another video that autoplays--then everything's done. Clunky, I know, but that's what needs to be done.
Here's my issue: I want the user to be able to fullscreen the first video (if they so desire) and retain that fullscreen "status" throughout the transition between videos.
For webkit browsers, fullscreen "mode" for the videos in that iFrame works. I'm using this snippet of code in my iFrame to do so:
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
So fullscreen mode does work, it just won't retain that fullscreen status when the video switches to the next. That makes sense.
I'm looking for way to detect that the user is viewing the video fullscreen and then automatically set the next video in the series to fullscreen when it is loaded.
Below is what the markup for each "video page" (that goes in the iFrame) looks like. The only difference between on video2.html and video3.html is that they have autostart:true below the width attribute.
<html>
<head>
<script src="http://jwpsrv.com/library/5Tx9ZN23EeKCNxIxOQulpA.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="videobox">
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"video/open-title-final.mp4",
height:480,
width:640,
events:{
onComplete: function() {
window.location = "video2.html";
}
},
});
</script>
</div><!-- /videobox -->
</body>
</html>
So again, I'm looking for a way to detect that a user has activated fullscreen mode, so that the next video in the series can be automatically set to activate fullscreen mode at the start. Is this possible?
Thanks in advance.