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

Display youtube video inline on IOS devices

本文关键字：显示 YouTube 视频 IOS      更新时间：2023-09-26

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

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

有什么建议吗？

谢谢。

更新

由于IOS 10问世html5视频标签内联属性在野生动物园上受支持，YouTube视频可以内联播放，因此@David安德顿的答案被标记为正确。

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

希望对你有帮助

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

例：

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

来自YouTube iFrame Player API：

此参数控制视频是在 iOS 上的 HTML5 播放器中内联播放还是全屏播放。有效值为： 0：此值导致全屏播放。这是当前默认值，但默认值可能会发生变化。 1：此值会导致在 allowsInlineMediaPlayback 属性设置为 TRUE 的情况下创建的 UIWebView 的内联播放。

您无法在

iOS 上的浏览器中内联播放视频。如果是混合应用程序(即使用 webview(，那么在实例化 Web 视图时，您可以设置 allowsInlineMediaPlayback 和 HTML 中的视频标签应具有"webkit-playsinline"属性。

第一个集合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>

注意 HTML 中的playsinline=1和autoplay=1。

相关文章：