Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
    video.pause();
    videoPlaying = false;
}
else {
    video.play();
    videoPlaying = true;
}
}
}//]]>  

</script>

and the HTML for the video

<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4">
</video>

Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
    video.pause();
    videoPlaying = false;
}
else {
    video.play();
    videoPlaying = true;
}
}
}//]]>  

</script>

and the HTML for the video

<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4">
</video>

• javascript
• ios
• html
• ipad
• video

2 Answers 2

Another solution is to call:

video.load()

It will redisplay the poster image. it will restart the video on next interaction, but you can save the time stamp and start playing from there if you wish.

You will have to register pause event on the video.

Something like this: JSFiddle code

Of course you should modify this for your needs and add some structure. Haven't tried it on iPad though. Also to note: registering click will introduce 300ms lag on tap event. You should look at touchstart event for touch devices and register both click and touchstart.

var overlay         = document.getElementById('video-overlay'),
    video           = document.getElementById('video'),
    videoPlaying    = false;

function hideOverlay() {
    overlay.style.display = "none";
    videoPlaying = true;
    video.play();
}

function showOverlay() {
    // this check is to differentiate seek and actual pause 
    if (video.readyState === 4) {
        overlay.style.display = "block";
        videoPlaying = true;
    }
}

video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);