javascript 在 IOS 设备上内联显示 youtube 视频
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33367473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display youtube video inline on IOS devices
提问by straiker2
I am trying to build a small web app which requires playing a youtube video behind some text.
我正在尝试构建一个小型网络应用程序,它需要在某些文本后面播放 youtube 视频。
I tried using the youtube Iframe api 'playsinline' parameter, but it won't work and display videos in fullscreen on IPhones.
我尝试使用 youtube Iframe api 'playsinline' 参数,但它无法在 iPhone 上全屏显示视频。
Any suggestions?
有什么建议?
Thanks.
谢谢。
UPDATE
更新
Since IOS 10 came out html5 video tag inline attribute is supported on safari and youtube videos can be played inline, and thus @David Anderton answer is marked correct.
由于 IOS 10 出现,safari 支持 html5 视频标签内联属性,并且可以内联播放 youtube 视频,因此@David Anderton 的答案被标记为正确。
Hope it helps
希望能帮助到你
回答by David
Add playsinline=1
paramerer to the embed url. Add ?
or &
before as appropriate; ?
if the only paramerter, &
to concatenate with other params.
将参数添加playsinline=1
到嵌入 url。酌情添加?
或&
之前;?
如果是唯一的参数,则&
与其他参数连接。
Example:
例子:
<iframe
src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>
From 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 上的 HTML5 播放器中内联播放还是全屏播放。有效值为: 0:此值导致全屏播放。这是当前的默认值,但默认值可能会发生变化。1:此值会导致为使用 allowedInlineMediaPlayback 属性设置为 TRUE 创建的 UIWebViews 进行内嵌播放。
回答by Shreyas
You can't play videos inline in the browser on iOS. If its a hybrid app(that is using a webview), then while instantiating the webview you can set the allowsInlineMediaPlayback and the video tag in the HTML should have the "webkit-playsinline" attribute.
您无法在 iOS 的浏览器中内联播放视频。如果它是一个混合应用程序(即使用 webview),那么在实例化 webview 时,您可以设置 allowedInlineMediaPlayback 并且 HTML 中的视频标签应该具有“webkit-playsinline”属性。
回答by Shreyas
First set allowsInlineMediaPlayback
and mediaPlaybackRequiresUserAction
to true.
首先设置allowsInlineMediaPlayback
并设置mediaPlaybackRequiresUserAction
为true。
Then check your iFrame HTML:
然后检查您的 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>
Note playsinline=1
and autoplay=1
in the HTML.
注意playsinline=1
和autoplay=1
在 HTML 中。