2

I am using the youtube iframe javascript api, and my videos are not playing in ios7. I've noticed that there is a play button within the iframe which is hidden by youtube's own stylesheets (or rather, set to a height and width of 1px !important). If I use safari's debugger with the ios7 simulator to remove these styles, the play button is visible, and when clicked, allows the video to play in ios.

The problem is, I cannot write a style in my stylesheets which overrides this behavior! How can I solve this issue? Attached is a screenshot of the offending style, and below is my code to initiate the player:

var videoOptions = {
        'controls': 0,
        'playsinline' : 1,
        'showinfo': 0,
        'html5':1,
        'modestbranding': 1,
        'autoplay': 0,
        'rel': 0,
        'enablejsapi' : 1,
        //'origin': window.location.origin,
        'wmode': 'opaque'
      };
      $scope.jsPlayer = new YT.Player('story-video-player-container', {
        height: '100%',
        width: '100%',

        videoId: $scope.currentVideo.youtube_id,
        events: {
              'onReady': $scope.onPlayerReady,
              'onStateChange': $scope.onPlayerStateChange,
              'onPlaybackQualityChange': $scope.onPlaybackQualityChange
        },
        playerVars: videoOptions,
      });

I've tried changing all of the videoOptions to show all controls / info / branding / etc, nothing works.

enter image description here

4

1 回答 1

2

这是一个已知问题，谷歌称其已“修复”，但其他开发人员（包括我们自己）坚持认为不是。我已经参考了你的问题。您可能想要关注这一点，但要报告并在讨论中添加您自己的声音。

在这一点上，这似乎完全由 Youtube 控制，因为它将 html5-video-container 内的视频标签的大小设置为 1px。

在我们的例子中，我们在页面上嵌入了 iframe，然后是一个运行 javascript 的按钮来显示隐藏的 div 元素以便视频出现，并触发 YouTube API 播放事件来播放视频（例如：http:// /www.3708colet.com）。

但谷歌表示这与“自动播放”相同，并且被 iOS 禁用（它显然也被 Android Chrome 禁用——在我们的测试中它也被破坏了）。至少在 iOS 中，它不会播放，而是在 iframe 所在容器的左上角显示一个 1px 的白色方块。如果我们点击它，它会触发与视频的“交互”并加载视频（不适用于 Android）。所以没有错误，但是 youtube 的页面并没有使该视频足够大以填充 iframe 区域。

于 2014-05-19T23:31:26.210 回答