Ionic 3 - 内联视频在 iOS 10 的本机播放器中全屏打开
Posted
技术标签:
【中文标题】Ionic 3 - 内联视频在 iOS 10 的本机播放器中全屏打开【英文标题】:Ionic 3 - inline video opens in fullscreen in native player on iOS 10 【发布时间】:2018-01-16 01:28:44 【问题描述】:我正在尝试在 ionic 3 移动应用程序内播放视频 - 我想避免启动本机视频播放器。
我正在 iPhone 5s - ios 10 上进行测试。
这是我创建的一个函数,用于根据我阅读的所有内容加载视频:
loadVideo(src: string, onComplete?: (src: string) => void): void
var video: htmlVideoElement = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', '');
video.setAttribute('src', src);
var onVideoLoaded = () =>
video.removeEventListener('loadeddata', onVideoLoaded);
if (onComplete != null) onComplete(src);
;
video.addEventListener('loadeddata', onVideoLoaded);
video.load();
加载完成后,我通过 video.play() 播放。
这个函数的另一个版本是:
loadVideo(src: string, onComplete?: (src: string) => void): void
var video: HTMLVideoElement = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', '');
var srcElement: HTMLSourceElement = document.createElement('source');
srcElement.setAttribute('src', src);
srcElement.setAttribute('type', 'video/mp4');
var onVideoLoaded = () =>
video.removeEventListener('loadeddata', onVideoLoaded);
if (onComplete != null) onComplete(src);
;
video.addEventListener('loadeddata', onVideoLoaded);
video.appendChild(srcElement);
video.load();
它使用源元素而不是视频元素中的源属性。
我还尝试直接在 HTML 中编写视频标签,以防 Angular 有一些代码可以解决这个问题:
<video playsinline webkit-playsinline autoplay muted">
<source src="test.mp4" type="video/mp4">
</video>
由于不应该为未静音的视频支持自动播放,因此我尝试通过 HTML 添加 muted 属性。 通过 javascript 添加它时,将其添加为属性时似乎没有效果,而是我正在编写 video.muted = true。
我尝试的另一件事是通过用户交互而不是自动播放来播放静音视频:
window.addEventListener('pointerdown', () => video.play());
我还尝试使用这个 polyfill,它应该在 iOS 8 和 9 上模仿 iOS 10 的 playinline:
enableInlineVideo(video, false);
https://github.com/bfred-it/iphone-inline-video
我尝试的一切最终都得到了相同的结果 - 在 iOS 上,视频在本机播放器中全屏播放,即使它应该内联播放,而在 android 上它按预期内联播放。
【问题讨论】:
【参考方案1】:您是否尝试过在您的config.xml
中使用以下内容
<preference name="AllowInlineMediaPlayback" value="true" />
这会触发 Native 应用程序以内联方式播放。在来到 HTML5 时,Apple Developer Site 中有一个有趣的事实@
在 iPhone 和 iPod touch(它们是小屏幕设备)上,“视频是 不在网页中显示”
【讨论】:
我阅读了很多关于内嵌视频的文章和问题,但没有人提到那一点信息。这解决了我的问题,谢谢:) 它仍在我的 iPhone 上全屏播放。 您需要通过再次清理来进行重建 这个去哪儿了?因为当我将它放在 iOS 下的配置中时,它会被覆盖? @OliverDixon 您需要将其添加到您的config.xml
文件夹结构的 ionic
中【参考方案2】:
它实际上需要两件事,而且它确实可以在 iPhone 上工作:
将此添加到 config.xml
<preference name="AllowInlineMediaPlayback" value="true" />
并且在 HTML 中你必须包含 webkit-playsinline
<video webkit-playsinline playsinline autoplay muted loop><source src='vid/vid.mp4' type='video/mp4'></video>
复制
Phonegap iOS HTML5 Video Opens Player
感谢@a432511
【讨论】:
你的配置是哪个目录?我们的在 iOS 上不断被覆盖。 编辑配置文件时,请确保没有ng serve
-process 正在运行,否则配置文件将在退出时被覆盖。以上是关于Ionic 3 - 内联视频在 iOS 10 的本机播放器中全屏打开的主要内容,如果未能解决你的问题,请参考以下文章
在 Ionic/Phonegap 中内联播放视频(webkit-playsinline 不工作)
HTML5 视频播放()不播放 ionic 3“ios 和 android
使用内联 CSS 为组件设计样式 - Ionic2、AngularJS
使用 admob 展示广告后,无法在 iOS 设备上的 ionic 应用程序的 iframe 内播放嵌入的 youtube 视频