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不同.

ps大视频是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 不能很好地处理嵌入媒体。

\n\n

正如这个答案所暗示的那样：

\n\n

对于控件，由于视频始终全屏播放，因此剩下的空间将捕获所有单击和触摸事件。

\n\n

上面建议的解决方法是将视频的标签设置width为height1/1 尺寸 - 固定位置为 -10、-10，并使用自定义 UI（而不是视频）手动触发“播放”。

\n\n

请注意Apple 开发站点中的以下信息：

\n\n

\n

针对小屏幕的优化

\n\n

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

\n\n

iOS 上的默认高度和宽度

\n\n

由于在加载影片元数据之前无法得知视频的本机尺寸，因此如果未指定高度或宽度，则在运行 iOS 的设备上\n 会分配默认高度和宽度 150 x 300。\n 目前，默认高度和宽度为 150 x 300。加载影片时，高度和宽度不会改变，因此您应该指定首选高度和宽度，以便在 iOS 上获得最佳用户体验，尤其是在 iPad 上，视频在分配的空间中播放。

\n\n

iPhone 视频占位符

\n\n

占位符为用户提供了一种播放媒体的方式。\n 如果iOS设备无法播放指定的媒体，则控件上会出现\n斜条，表示无法播放。

\n

\n\n

如果您愿意考虑替代方案，这个 cordova 插件可能会很有用：

\n\n

\n

此插件允许您在 iOS 和 Android 上的全屏本地播放器中流式传输音频和视频。

\n

\n\n

基本用法：

\n\n

var videoUrl = STREAMING_VIDEO_URL;\n\n  // Just play a video\n  window.plugins.streamingMedia.playVideo(videoUrl);\n

\n