Cordova iOS视频标记本地文件源 [英] Cordova iOS Video tag Local File Source

问题描述

我在基于Cordova的应用上在iOS上播放本地视频时遇到问题。一开始我想强调，这个问题只发生在我使用 WKWebView ，如果使用UiWebView，视频播放正常。这是我的情况：

- 用户进入到视频网址传递到的屏幕

-Via FileTransfer

- 使用JS视频加载到< video> 标记和播放。

基本上，我做的一切，如回答这个SO 问题。
UiWebView的问题是，如果相对路径设置为src，由于某些原因的视频无法加载（无论使用哪个组合），所以这个解决方案对我很好，因为它是基于这个代码行：

  entry.toURL（）
  

这将返回下载的视频的完整路径，这是伟大的，至少对于UiWebView。

WkWebView的问题是entry.toURL（）返回smth。像这样：

  file：/// var / mobile / Containers / Data / Application / 3A43AFB5-BEF6-4A0C-BBDB- FC7D2D98BEE9 / Documents / videos / Dips.mp4 
  

而WKWebView不支援file：// protocol 。此外，WKWebView不工作相对路径：（

任何人都可以帮助我解决这个问题。

解决方案

我今天通过以下方式工作，但仅在以发布模式部署到我的设备时，在调试模式下将应用程序部署到我的设备将无法工作。 / p>

• iOS 9.3.2


• Cordova 4.0.0（iOS 3.8.0）


• Telerik WKWebView Polyfill 0.6.9

视频列表加载方法 p>

  var path = window.cordova.file.documentsDirectory，// iTunes文件共享目录
 href ='http：// localhost：12344 / Documents'，// WKWebView默认服务器url到文档
 list = []; 
 function fsSuccess（dir）{
 var reader = dir.createReader（）; 
 reader.readEntries（function（entries）{
 for（var i = 0; i< entries.length; i ++）{
 list.push（{name：entries [i] .name，path ：href + entries [i] .fullPath}）; 
} 
}）; 
} 
 function fsError（error）{
 console.log（'error'，error）
} 
 window.resolveLocalFileSystemURL（path，fsSuccess，fsError）; 
  

视频列表点击处理程序：

  var video = $（'＃video'）[0]，
 source = $（'＃source'）; 
 function play（index）{
 source.attr（'src'，list [index] .path）; 
 video.load（）; 
 video.play（）; 
} 
  

视频播放器标记：

 < video id =videoautoplay controls loop webkit-playsinline> 
< source id =sourcetype =video / mp4/> 
< / video> 
  

我在我的桌子上敲我的头a la Ren Hoek调试，直到我试图释放buid它工作。

I have problem playing local video on iOS on my Cordova based app. At the beginning I want to stress out that this problem is happening only when I'm using WKWebView, and if UiWebView is used, video plays fine. This is scenario I have:

-User comes to screen to which video url is passed

-Via FileTransfer I download it to phone and store it at desired location

-Using JS video is loaded to <video> tag and played.

Basically I'm doing everything as described in answer to this SO question. The problem with UiWebView was that if relative path was set to src, video for some reason couldn't be loaded (no matter which combination I used), so this solution worked great for me, because it is based on this line of code:

entry.toURL()

This returns full path of the downloaded video which is great, at least for the UiWebView.

The problem for WkWebView is that entry.toURL() returns smth. like this:

file:///var/mobile/Containers/Data/Application/3A43AFB5-BEF6-4A0C-BBDB-FC7D2D98BEE9/Documents/videos/Dips.mp4

And WKWebView doesn't work with file:// protocol. Also, neither WKWebView works wit relative paths :(

Can anyone help me to fix this ?

解决方案

I got this working today with the following but only when deployed to my device in Release mode. When deploying the app in Debug mode to my device it would not work.

• iOS 9.3.2
• Cordova 4.0.0 (iOS 3.8.0)
• Telerik WKWebView Polyfill 0.6.9

Video list load method:

var path = window.cordova.file.documentsDirectory, //iTunes File Sharing directory
    href = 'http://localhost:12344/Documents', //WKWebView default server url to documents
    list = [];
function fsSuccess(dir) {
    var reader = dir.createReader();
    reader.readEntries(function (entries) {
        for (var i = 0; i < entries.length; i++) {
            list.push({ name: entries[i].name, path: href + entries[i].fullPath });
        }
    });
}
function fsError(error) {
    console.log('error', error)
}
window.resolveLocalFileSystemURL(path, fsSuccess, fsError);

Video list click handler:

var video = $('#video')[0],
    source = $('#source');
function play(index) {
    source.attr('src', list[index].path);
    video.load();
    video.play();
}

Video player markup:

<video id="video" autoplay controls loop webkit-playsinline>
    <source id="source" type="video/mp4" />
</video>

I was banging my head on my desk a la Ren Hoek while debugging until I attempted a release buid and it worked.

这篇关于Cordova iOS视频标记本地文件源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！