如何在ipad上控制Apple视频播放器（视频嵌入iframe和html5 vimeo解决方案）

发布于 2024-11-07 18:43:11 字数 1057 浏览 0 评论 0原文

我使用 vimeo html5 嵌入解决方案嵌入了视频。我可以在 ipad 上播放视频。我想

在点击链接时隐藏播放器并暂停视频或者单击链接时卸载视频；然后在单击另一个链接时重新加载视频

我尝试了Apple javascript解决方案来暂停：

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();
   }

但似乎我必须在同一域上调用视频操作和/或没有 iframe

2.我尝试了第一个按钮

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

，第二个按钮

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

是隐藏+卸载，然后在 Firefox、Chrome 上显示+重新加载视频，等等...但是在ipad上它会隐藏而不卸载，然后在fadeIn操作时不会显示播放器...

有什么建议吗？有什么办法可以控制ipad上的苹果quicktime播放器吗？

原文

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咆哮 2024-11-14 18:43:11

我成功地做到了

<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", "");
});

与 ipad 兼容，iframe 标签中的第一个 src 必须为空

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

回复收藏 0 原文

~没有更多了~