在 IOS 台设备上内联显示 YouTube 视频

Question

我正在尝试构建一个小型网络应用程序，它需要在一些文本后面播放 YouTube 视频。

我尝试使用 youtube Iframe api 'playsinline' 参数，但它无法在 iPhone 上全屏显示视频。

有什么建议吗？

谢谢。

更新

自从 IOS 10 出来 html5 video tag inline 属性在 safari 上支持，youtube 视频可以内联播放，因此@David Anderton 的答案被标记为正确。

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12

希望对您有所帮助

Answer 1

您无法在 iOS 上的浏览器中内联播放视频。如果它是混合应用程序（使用 webview），那么在实例化 webview 时，您可以设置 allowsInlineMediaPlayback 并且 HTML 中的视频标签应该具有 "webkit-playsinline" 属性。

Answer 2

首先将 allowsInlineMediaPlayback 和 mediaPlaybackRequiresUserAction 设置为 true。

然后检查您的 iFrame HTML:

<html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='640' height='480' src='http://www.youtube.com/embed/5_ofy9Ae87M?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>

注意 playsinline=1 和 autoplay=1 在 HTML.

Answer 3

将 playsinline=1 参数添加到嵌入 url。酌情在前面加上?或&； ? 如果是唯一的参数，& 与其他参数连接。

示例：

<iframe
  src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>

来自YouTube iFrame Player API：

This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are: 0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change. 1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.

在 IOS 台设备上内联显示 YouTube 视频

Display youtube video inline on IOS devices

html

javascript

youtube

ios

更新