Home/ Questions/Q 9013621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:18:50+00:00

I am setting up a video js player for iPad where upon completion of

  • 0

I am setting up a video js player for iPad where upon completion of the video, an img pops up. I am able to have this working without full screen, but iPad users tend to only want to use full screen when watching videos. So I am trying to figure out how to push img content inside of the full screen frame when the video completes without having to exit out of full screen to see the image. Is this possible?

Here is the code I have so far:

<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet'         type='text/css'>

<style type="text/css">

body {
background-color: #EAEAEA;  
}
.style2 {font-size: 24px}
div#showdiv {
        background-image:url('BackGround.png');
        width:800px; 
        height:446px;
}
textarea#tweet {
                background:transparent;
            border:transparent; 
            float:left; 
                font-weight: bold;
                font-size:170%;
                margin-left:100px;
                margin-right:100px;
                margin-top:30px;
                width:600px;
                height:600px;
                opacity:0.7;
                color:660000;
                font-family: 'Petit Formal Script', cursive;
}
</style></head>

<body>
<div id = "okaydiv"></div>

<div align="center">
      <p>
    <div id = "showdiv" style="display:none" align="center">
        <p>
            <textarea cols="50" rows="5" id="tweet" >this is the text over     image</textarea>
        </p>
</div>
<video id='myVideo' align="center" class='video-js 
    vjs-default-skin' preload='auto' data-setup='{}' 
    poster='thumb.png' width='800' height='446' controls autobuffer>
<source src='vid.mp4' type='video/mp4'l></source>
    <source src='vid.ogg' type='video/ogg'></source>
    <source src='vid.webm' type='video/webm'>


</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type='text/javascript'>
    var toggleFx = function() {
    $.fx.off = !$.fx.off;
    };
    toggleFx();

    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e) {
        if(!e) { e = window.event; }
        // What you want to do after the event
        $("#myVideo").toggle("slow");
        $("#showdiv").toggle("slow");
        //document.getElementById('okaydiv').innerHTML = "<img src = 'cleanscreen.png'/>";
    }
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Given that when the iPad user presses the full screen button, the video file is then opened up in the native iOS video player you wouldn’t be able to have an image “pop-up” on its own inside of that player as you’re no longer in the web browser.

    Unfortunately iOS is pretty locked up when it comes to their own native apps so I don’t think you’re able to cue an event at the end of the video to close full screen on an ipad or iphone, but if you’ve got it working so that you see the image being displayed when the user closes full screen mode (ie, closing the native video player), then an alternative might be to create some consistency and insert the image now being displayed on the website as the final frame of the video being played. That way, when the user goes back to the browser, they’re seeing something familiar.

    • 0