Cordova iOS 视频标签本地文件源

Posted 2023-05-07

【中文标题】Cordova iOS 视频标签本地文件源

【英文标题】：Cordova iOS Video tag Local File Source

【发布时间】：2016-08-06 09:15:34

【问题描述】：

我在基于 Cordova 的应用上播放 ios 上的本地视频时遇到问题。一开始我想强调这个问题只有在我使用WKWebView时才会出现，如果使用UiWebView，视频播放正常。这是我的场景：

-用户来到视频 url 传递到的屏幕

-通过 FileTransfer 我将其下载到手机并将其存储在所需位置

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

基本上，我正在按照对这个 SO question 的回答中的描述做所有事情。 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:// 协议。此外，WKWebView 都不适用于相对路径:(

谁能帮我解决这个问题？

【问题讨论】：

确保您在config.xml 中启用了iOS 的AllowInlineMediaPlayback 首选项。 cordova.apache.org/docs/en/latest/config_ref/…。另外，您使用哪个插件来启用 WKWebView 的使用？

抱歉回复慢，是的，我已经添加了那行，但不幸的是它没有帮助我。我正在使用这个插件：github.com/Telerik-Verified-Plugins/WKWebView

这有帮助吗？ ***.com/questions/32546965/…

@daserge 我相信这应该会有所帮助，但我无法让它工作：/所以这就是我得到的绝对网址：file:///var/mobile/Containers/Data/Application/A313B954-55C5-49F1-801F-5AF519EA4E8E/Library/files/video/High-Knees.mp4。这些是我尝试过的组合（没有一个有效）：http://localhost:12344/Library/files/video/High-Knees.mp4http://localhost:12344/video/High-Knees.mp4http://localhost:12344/var/mobile/Containers/Data/Application/A313B954-55C5-49F1-801F-5AF519EA4E8E/Library/files/video/High-Knees.mp4

@hyperN 如果您正在下载文件并将其存储在设备中，您不能只使用可让您在所需播放器中播放视频的 fileopener cordova 插件打开视频吗？

【参考方案1】：

我今天通过以下方式完成了这项工作，但仅在以发布模式部署到我的设备时。以调试模式将应用程序部署到我的设备时，它不起作用。

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

视频列表加载方式：

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

视频列表点击处理程序：

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

视频播放器标记：

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

我在调试时像 Ren Hoek 一样把头撞在桌子上，直到我尝试发布版本并且它成功了。

【参考方案2】：

使用 cordova 文件打开器插件从设备打开下载文件的示例 sn-p。（虽然未在 WKWebView 中测试）

var fileTransfer = new FileTransfer();
var cdr;

if (sessionStorage.platform.toLowerCase() == "android") 
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, onFileSystemSuccess, onError);
 else 
    // for iOS
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);


function onError(e) 
    navigator.notification.alert("Error : Downloading Failed");
;

function onFileSystemSuccess(fileSystem) 
    var entry = "";
    if (sessionStorage.platform.toLowerCase() == "android") 
        entry = fileSystem;
     else 
        entry = fileSystem.root;
    
    entry.getDirectory("Cordova", 
        create: true,
        exclusive: false
    , onGetDirectorySuccess, onGetDirectoryFail);
;

function onGetDirectorySuccess(dir) 
    cdr = dir;
    dir.getFile(filename, 
        create: true,
        exclusive: false
    , gotFileEntry, errorHandler);
;

function gotFileEntry(fileEntry) 
    // URL in which the pdf is available
    var documentUrl = "http://localhost:8080/testapp/test.pdf";
    var uri = encodeURI(documentUrl);
    fileTransfer.download(uri, cdr.nativeURL + "test.pdf",
        function(entry) 
            // Logic to open file using file opener plugin
            openFile();
        ,
        function(error) 
            navigator.notification.alert(ajaxErrorMsg);
        ,
        false
    );
;

function openFile() 
    cordova.plugins.fileOpener2.open(
        cdr.nativeURL + "test.pdf",
        "application/pdf", //mimetype
        
            error: function(e) 
                navigator.notification.alert("Error Opening the File.Unsupported document format.");
            ,
            success: function() 
                // success callback handler
            
        
    );
;

【讨论】：

我在这段代码中发现了 5 个错误……在修复了所有这些错误之后，它仍然无法正常工作。您是否专门在 WKWebView 上对此进行了测试？

@hyperN 没有在 WKWebView 中尝试过。将检查并返回。但不幸的是，试图提供可能的解决方案的答案被否决了

非常感谢您的回答，但我花了更多时间修复此代码中的错误，而不是根据我的需要调整它，结果发现您还没有阅读我的问题在第一句话中说明问题仅出在 WKWebView 上。对不起，但我觉得这根本没有帮助。无论如何，我想再给它一次机会，我从一开始就使用这个插件写了整件事，最后插件工作了，但我能做的唯一有用的事情就是将视频保存到“照片”或分享它实际上没有播放对我没用的视频。

@hyperN 正在查看此链接 - github.com/apache/cordova-plugin-wkwebview-engine 与此问题相关，并提到“由于此 Apple 错误，AllowInlineMediaPlayback 首选项将不起作用。”进一步查看问题链接 - openradar.appspot.com/radar?id=6673091526656000 这似乎是 iOS9 和更高版本中的一个错误。这是否意味着您的问题无法解决？可以看看吗

@hyperN 更新了帖子，提到它还没有在 WKWebView 中测试。另外你不需要道歉，因为我忽略了你的问题。将深入挖掘并让您知道我是否在此找到任何东西。干杯。