Cordova IOS视频播放器

Question

我正在通过RTCMultiConnection使用webRTC流媒体。我创建了一个cordova应用程序，并在视频标签中从服务器获取blob url。在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中看不到我。

Videoplayer不起作用。

编辑2：26.09.2017 mp4视频没有问题。我尝试使用远程mp4视频，效果很好。

这是截图，它们都是一样的。只有src不同。

p.s大视频是mp4始终静态位置，小视频是blob，当我滚动时，它滚动到。 ：

https://i.imgyukle.com/2017/09/25/kgZev.jpg

https://i.imgyukle.com/2017/09/25/kg4kx.jpg

https://i.imgyukle.com/2017/09/25/kg6a6.jpg

在此输入图片说明

Answer 1

iOS无法与嵌入式媒体相媲美。

正如SO answer suggests：

对于控件，由于视频始终以全屏模式播放，因此左侧空间将捕获所有点击和触摸事件。

上面建议的解决方法可能是设置视频标记width＆amp; height到1/1尺寸 - 将位置固定为-10，-10并使用自定义UI手动触发“播放”，而不是视频。

请注意Apple's Dev Site中的以下信息：

  

优化小屏幕

     

目前，Safari优化了较小屏幕的视频演示   在iPhone或iPod touch上使用全屏视频播放视频   触摸屏幕时会出现控件，并且视频会缩放到   以纵向或横向模式适合屏幕。视频未显示   在网页内。高度和宽度属性仅影响   在网页上分配的空间，并忽略controls属性。   这仅适用于具有小屏幕的设备上的Safari。在Mac OS上   X，Windows和iPad，Safari播放视频内嵌，嵌入在   网页。

     

iOS上的默认高度和宽度

     

因为直到电影才知道视频的原生尺寸   元数据加载，分配默认高度和宽度150 x 300   如果未指定高度或宽度，则在运行iOS的设备上运行。   目前，电影时默认的高度和宽度不会改变   加载，所以你应该指定首选的高度和宽度   iOS上的最佳用户体验，尤其是在视频播放的iPad上   在分配的空间中。

     

iPhone视频占位符

     

占位符为用户提供了播放的方式   媒体。如果iOS设备无法播放指定的媒体，则有一个   通过控制对角线，表示它无法播放。

如果您愿意考虑替代方案，this cordova plugin可能会有用：

  

此插件允许您以全屏方式流式传输音频和视频，   iOS和Android上的原生播放器。

基本用法：

var videoUrl = STREAMING_VIDEO_URL;

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