How to control Apple video player on ipad (video embedded with iframe and html5 vimeo solution)

Question

I embedded a video with vimeo html5 embedding solution. I can play the video on ipad. I would like to

hide the player and pause the video when clicking on a link or unload the video when clicking on a link; then reload the video when clicking on another link

1. I tried Apple javascript solution for pausing:

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

function playPause() {
   var myVideo = document.getElementsByTagName('video')[0];
   if (myVideo.paused)
       myVideo.play();
   else
       myVideo.pause();
   }

but it seems I have to call video actions on the same domain and/or without iframe

2.I tried for the first button

$('#video').fadeOut(400);

and for the second

$('#video1').fadeIn(400);

it's hiding+unloading then showing+reloading the video on firefox, chrome, etc... but on ipad it's hiding without unloading and then not showing back the player on fadeIn action...

Any suggestions? is there any way to control apple quicktime player on ipad?

Answer 1

i succed doing this

<a id="button" href="#">go</a>

<a id="button2" href="#">goback</a>

<div id="video">
<iframe id="video1" src="" width="555" height="312" frameborder="0"></iframe>
</div>

$( "#button" ).click(function(){
$('#video').fadeIn(400);
$("#video1").attr("src", "http://player.vimeo.com/video/myvideoid");
$("#video1").load();
});

$( "#button2" ).click(function(){
$('#video').fadeOut(400);
$("#video1").attr("src", "");
});

to be compliant with ipad, first src in iframe tags MUST be empty