Question

I have a link ” watch video ” when users click on it, they should be able to see video playing in iPhone and other mobiles player. I had hide the video by using display:none but how I can run the video upon click ?

My code is here

<p class="links right_links"><a href="#!" onClick="playVideo();">Watch Video Review!</a>
<script>
    function playVideo(){
        $('#mPlayer').show().play();
       //document.getElementById('mPlayer').play();
      }
 </script>
 <video style="display:none" id="mPlayer" controls width="150" src="/imgs/vidrvws/<%=request.querystring("prod")%>.mp4" poster="inc/vscript/poster.png" height="150"></p>

Answer 1

You can access the DOM element in jQuery by using the .get( 0 ) method passing in the index of the item you want. In your case index of 0 will work fine since you used an ID selector.

Updated: Opps, I forgot to add the .get( 0 ) to the code snippet as described above.

Try this..

$('#mPlayer').show().get( 0 ).play(); instead.