Play video on image click on iphone

Question

I am trying to play a video on image click event. The device I am interesting in is the iphone. I want the iphone user, when comes to my site, to click on image and play the video on device native player. I have also tried video tag with poster but when the video ends and the user comes back to my site the poster is not showing anymore. I have tested with android device and there is no problem. That’s why I decided to make it work with onclick image event instead video tag.

Any help would be really appreciated if someone can help me, as I am looking for a workaround for weeks.

<!DOCTYPE html>

<div id="home01">
<img id="myImg" src="picture.jpg" width="640" height="360">
</div>


 <script language="javascript" type="text/javascript">

 document.getElementById('myImg').addEventListener('click', function (e) {

    var video = document.createElement('video');
    var sourceTag = document.createElement('source'); 

    sourceTag.type = 'video/mp4';
    sourceTag.src = 'rolex.mp4';

    video.appendChild(sourceTag);

    video.play();
});

 </script>

</html>

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

This is one way of doing it:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My iPhone player</title>
<style>
video {display:none;}
</style>
</head>

<body>
<div id="home01">
<img id="myImg" src="picture.jpg" width="640" height="360">
<video id="myPlayer" src="rolex.mp4" controls width="640" height="360"></video>
</div>

<script type="text/javascript">
document.getElementById('myPlayer').addEventListener('webkitendfullscreen', function () {
    document.getElementById('myPlayer').style.display = 'none';
},false);
document.getElementById('myImg').addEventListener('touchstart', function () {
    document.getElementById('myPlayer').style.display = 'block';
    document.getElementById('myPlayer').play();
},false);
</script>
</body>
</html>

One of the reasons your code is not working is because the video element is created after the click event (should be touchstart on iPhone/touch devices as per my example) and that Apple does not allow. Your video element needs to be in the DOM before the touch event.

I suggest you read this question for more information.

You can refine the code for better layout.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 18 '14 at 10:19

Arnaud Leyder

6,674
5
31
43

thank you Florestan06 for your assistance. As i don't have an iphone to test the code right now, my main question is. Will the video element be visible when the video ends and the user returns to the web page as i would prefer to remain hidden so the user doesn't see anything else except the image. thank you – dionisis Apr 18 '14 at 10:49
You will need to test on an actual device to see if it exactly fits your needs. I believe it should. – Arnaud Leyder Apr 18 '14 at 10:55
Have you been able to try the above code? does it work as expected? – Arnaud Leyder Apr 22 '14 at 17:01
Thank you for your interest, i tested the code but when the video ends and the user comes back to my site, the video remains black. However at this time i am testing iphone with simple video tag no javascript and i think i will be able to make it work as i want to. thank you. – dionisis Apr 26 '14 at 09:01
It seems you do not have the tools to implement the suggested code above. You should be more thorough when seeking support with the Stackoverflow community as most people here are professional programmers. – Arnaud Leyder Apr 26 '14 at 22:23

score 0 · Answer 2 · edited May 23 '17 at 12:05

Here's how I was able to make this happen, and so far it's a good experience on mobile and desktop (tested on iPhone):

The HTML inside your main document (note the PATH_TO that needs replacement inside the flash fallback; also you'll need to download the flowplayer assets. Flash fallback is definitely optional and not needed for iOS):

<div class="container">
    <video class="video" preload="none" loop>
      <source src="videos/01.mp4" type="video/mp4" />
      <source src="videos/01.webm" type="video/webm; codecs=vp8,vorbis" />
      <!-- flash fallback -->
        <object width="645" height="497" type="application/x-shockwave-flash"
        data="http://PATH_TO/js/flowplayer-3.2.18.swf">
        <param name="movie" value="http://PATH_TO/js/flowplayer-3.2.18.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value="config={'clip': {'url': 'http://PATH_TO/videos/01.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
      </object>
        <img src="img/01.jpg" alt="Image Fallback if JS disabled" />
    </video>
    <div class="play-overlay" style="display: block">
        <span class="play-button">Play</span>
        <img src="img/01.jpg" alt="Poster Image" />
    </div>
</div>

and the jQuery (make sure you have jQuery loaded in the head of your HTML) to control the video:

<script type="text/javascript">
jQuery(document).ready(function( $ ) { // define jQuery and wrap in doc.ready
// video controls
    var video = $('.video');
    video.click(function() { // click listener
            $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); // play-pause controls
            $(this).parent().find('.play-overlay').fadeToggle(400); // poster-image fader
  });
});
</script>

credit for my answer goes to this thread: Play/pause HTML 5 video using JQuery

Play video on image click on iphone

2 Answers2