Search code examples
ioshtmlhtml5-videomobile-safari

Play fullscreen video from a link on iOS Safari

I want to play an .mp4 video with the fullscreen player in a iPhone when the user clicks a link, for example:

<a href="http://www.example.com/video.mp4">Play the video</a>

When the video finishes, I want to hide the fullscreen video and show the user the webpage again, without showing the paused / finished video area to the user. Is there any way to do it?

I already tried the HTML5 <video> element (shows the video area when I exit the fullscreen mode) and a direct link (must hit back in the browser to return the webpage). Any ideas?

Solution

  • I think that using HTML5 <video> is definitely the way to go, but using some tweaks..

    Start with adding a link and a video object. We'll make the video hidden so it won't show the preview thumbnail. The link will call a JavaScript function:

    <a href="javascript:playVideo();">Play the video</a>
<video id="video-player" style="display:none !important;">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

    The JavaScript part will trigger the play on the video object and will also add a handler to the "video ended" event so we can automatically close the video when it ends:

    function playVideo() {
  var videoPlayer = document.getElementById('video-player');
  videoPlayer.addEventListener('ended', onVideoEnded, false);
  videoPlayer.play();
}

function onVideoEnded(event) {
  var videoPlayer = document.getElementById('video-player');
  videoPlayer.webkitExitFullscreen();
}