javascript - 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);

我的视频 URL 是:blob : file:///adfsg-123asd1-12asfd3-4fdssdv

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

视频播放器不工作。

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

Answer 1

遗憾的是，iOS 不能很好地处理嵌入媒体。

因为这个SO answer suggests :

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

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

请注意来自 Apple's Dev Site 的以下信息:

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

Default Height and Width on iOS

Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.

iPhone Video Placeholder

The placeholder provides a way for the user to play the media. If the iOS device cannot play the specified media, there is a diagonal bar through the control, indicating that it cannot play.

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

This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.

基本用法:

var videoUrl = STREAMING_VIDEO_URL;

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