首页 文章

Cordova IOS视频播放器

提问于
浏览 次
9

我通过RTCMultiConnection使用webRTC流 . 我创建了一个cordova应用程序，并在视频标签中从服务器获取blob url . 在Android和浏览器中运行良好 . 在IOS中，视频播放但控制按钮不起作用 . 视频的位置在应用程序中也是静态的 . 我在应用程序中更改页面但视频始终保留 . 当我尝试拉页面时，它看起来像这样：

enter image description here

enter image description here

我的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

Edit : 我可以在浏览器上看到我的iphone前置摄像头 . 但我在iphone中看不到我 .

Videoplayer不起作用 .

Edit 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

在此输入图像描述

javascript ios cordova video

1 回答

  • 0

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

    这个SO answer suggests：

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

    上面建议的解决方法可能是将视频的标签 width ＆ height 设置为1/1尺寸 - 将固定位置设置为-10，-10并使用自定义UI手动触发"play"而不是视频 .

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

    小屏幕优化目前，Safari通过在触摸屏幕时显示全屏幕视频控件来优化iPhone或iPod touch上较小屏幕的视频演示，并缩放视频以适应屏幕的纵向或横向模式 . 视频未在网页中显示 . height和width属性仅影响分配在网页上的空间，并忽略controls属性 . 这仅适用于具有小屏幕的设备上的Safari . 在Mac OS X，Windows和iPad上，Safari播放嵌入在网页中的视频内嵌 . iOS上的默认高度和宽度由于在加载电影元数据之前不知道视频的原生尺寸，因此如果未指定高度或宽度，则在运行iOS的设备上会分配默认的高度和宽度150 x 300 . 目前，电影加载时默认的高度和宽度不会改变，因此您应该指定首选的高度和宽度，以便在iOS上获得最佳用户体验，尤其是在iPad上，视频在分配的空间中播放 . iPhone视频占位符占位符为用户提供了播放媒体的方式 . 如果iOS设备无法播放指定的媒体，则控制器上有一个斜条，表示无法播放 .

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

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

    基本用法：

    var videoUrl = STREAMING_VIDEO_URL;

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

相关问题