在iPhone上,Vimeo Javascript API .play()函数在视频播放之前不起作用 [英] On iPhone, Vimeo Javascript API .play() function doesn't work until the video has been played

查看:319
本文介绍了在iPhone上,Vimeo Javascript API .play()函数在视频播放之前不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用SwipeView( http://cubiq.org/swipeview )在触摸屏设备上创建可滑动的幻灯片。这对图像来说很简单,但我想在幻灯片中加入Vimeo视频。不幸的是,因为iFrame会捕获你自己的滑动输入(我相信至少会发生这种情况),一旦你到达视频播放器幻灯片,除非你点击分页,否则你再也无法轻扫它。这是不可接受的。

I'm using SwipeView (http://cubiq.org/swipeview) to create a swipeable slideshow on touchscreen devices. This is simple enough with images, but I want to include a Vimeo video in the slideshow as well. Unfortunately, because the iFrame captures your swipe input for itself (I believe this is what's happening at least), once you've arrived at the video player slide you can no longer swipe away from it unless you tap on the pagination. This isn't acceptable.

我的解决方案是在页面的某处隐藏视频(使用display:none;或height:0;或者其他任何工作)并使用幻灯片中的图像,其中包含触发视频播放的点击事件。即使视频是隐藏的,当它播放时它应该全屏播放(至少在iPhone上)。

My solution was to hide the video somewhere on the page (using display: none; or height: 0; or whatever works) and use an image in the slideshow with a click event that triggers the video to play. Even if the video is hidden, when it plays it should go fullscreen and play (on iPhone, at least).

当我在我的网站上测试时,这项技术工作正常桌面浏览器,但它在iPhone上表现得很奇怪。出于测试目的,视频显示在幻灯片下方。如果我加载页面并点击幻灯片,它什么都不做。但是,如果我通过点击实际的视频播放器播放视频,一旦视频关闭,我可以通过点击幻灯片再次播放视频。基本上,一旦通过播放器播放视频,我就可以通过API播放视频,但不能先不使用播放器。

This technique is working fine when I test it on my desktop browser, but it's behaving strangely on the iPhone. For testing purposes, the video is being displayed underneath the slideshow. If I load the page and tap on the slide, it does nothing. However, if I play the video by tapping the actual video player, once the video has been closed I can play the video again by tapping the slide. Basically, once the video is played via the player I can play the video via the API but not without using the player once first.

这是我的代码:

// Append the "hidden" video player to the page
$('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>");

// Get the player object
var iframe = $('#slideshow-player')[0],
    player = $f(iframe);

// When the video is ready
player.addEvent('ready', function() {
    // Add the click event to the slide
    $('#play-video').on('click', function() {
        // Play the video
        player.api('play');

        // Don't jump the page
        return false;
    });
});

我已经通过测试确定了player.ready事件是否正常工作,以及图像的点击事件工作正常。问题似乎完全在于 player.api('play')调用。任何帮助,或实现此目的的替代方法将不胜感激。

I have determined through testing that the player.ready event is working properly, and that the image's click event is working properly. The problem seems to lie entirely in the player.api('play') call. Any help, or an alternate method of accomplishing this would be appreciated.

推荐答案

在进一步调查此问题并找到另外两个StackOverflow问题后相同的问题(带有js API和iPhone的视频播放器带有js API和iPhone的视频播放器)以及相同的事实行为发生在Vimeo的官方API游乐场上,它似乎要么是设计特征,要么是API的错误。

After investigating this further and finding two other StackOverflow questions with the same issue (video players with js API and iPhones and video players with js API and iPhones) as well as the fact that this same behavior occurs on Vimeo's official API playground, it seems that either it's either a feature by design or a bug with the API.

理论化:Apple不允许你自动播放移动Safari中的视频。也许这个限制是强加给Apple的,以防止你使用API​​通过Javascript自动播放视频。

Theorizing: Apple doesn't allow you to autoplay videos in mobile Safari. Perhaps this limitation is being imposed on Apple's end to prevent you from using the API to autoplay a video with Javascript.

这篇关于在iPhone上,Vimeo Javascript API .play()函数在视频播放之前不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆