Cordova IOS视频播放器

Question

我正在使用webRTC流通过RTCMultiConnection。我创建了一个Cordova应用程序，并在视频标记中从服务器获取blob。在Android和浏览器中，这很好用。在IOS中，视频播放，但控制按钮不工作。另外，视频在应用程序上的位置是静态的。我更改了应用程序中的页面，但是视频始终保持不变。当我试图拉出这一页时，它看起来如下：

​

​

​

​

我的HTML代码：

<video webkit-playsinline playsinline class="screen-video" src="" reload="metadata" autoplay controls></video>

以及我在JS中的附加内容：

var videoURL = event.mediaElement.src;
$('.screen-video').attr('src', videoURL);

我的videoURL是：blob : file:///adfsg-123asd1-12asfd3-4fdssdv

编辑：我可以在浏览器上看到我的iPhone的前摄像头。但我在iPhone上看不到自己。

视频播放器不工作。

编辑2 (26-09-2017):没有mp4视频的问题。我试过使用远程mp4视频，而且效果很好。

Answer 1

遗憾的是，iOS对嵌入式媒体并不友好。

就像这个所以答案表明

对于控件，由于视频总是在全屏播放，剩下的空间将捕获所有的点击和触摸事件。

以上建议的一个解决办法是将视频的标签width & height设置为1/1维-固定位置为-10，-10，并手动触发“播放”，使用自定义UI代替视频。

注意来自苹果的Dev网站的以下信息

小屏幕的优化 目前，Safari通过使用全屏幕播放视频来优化iPhone或iPod触摸上较小屏幕的视频显示--当屏幕被触摸时会出现视频控件，并且视频被缩放以适应人像或景观模式的屏幕。视频不在网页中显示。高度和宽度属性仅影响在网页上分配的空间，而忽略controls属性。这只适用于在带有小屏幕的设备上的Safari。在Mac、Windows和iPad上，Safari在线播放视频，嵌入网页。 在iOS上的默认高度和宽度 由于在电影元数据加载之前不知道视频的本机尺寸，因此如果未指定高度或宽度，则在运行iOS的设备上分配默认的高度和宽度为150 x 300。当前，当电影加载时，默认的高度和宽度不会改变，因此您应该为iOS上的最佳用户体验指定首选的高度和宽度，特别是在iPad上，视频在分配的空间中播放。 iPhone视频占位符 占位符为用户播放媒体提供了一种方式。如果iOS设备不能播放指定的媒体，则在控件中有一个对角线条，指示它不能播放。

如果您愿意考虑其他选择，这个科多瓦插件可能是有用的：

这个插件允许你在一个全屏上播放音频和视频，本地播放器在iOS和安卓上。

基本用法：

var videoUrl = STREAMING_VIDEO_URL;

  // Just play a video
  window.plugins.streamingMedia.playVideo(videoUrl);