在 Meteor 生成的 iOS 应用程序中获取本地 HTML5 视频

Question

我正在使用 Meteor 构建一个 iOS 应用程序，它要求我播放本地存储的 mp4，但移动应用程序不显示任何视频。

我有这个模板：

    <template name="video">

{{#if cordova}}
    Mobile Player


    <video webkit-playsinline id="example_video_1" width="50%" height="20%">
        <source src="/my_vid.mp4" type="video/mp4">
    </video

 {{else}}
    Desktop

         <video control id="example_video_1" width="50%" height="20%" src="/my_vid.mp4">
        </video>

{{/if}}
</template>

桌面版工作正常，但我在 iOS 版中播放视频时遇到问题。

这是我对应的Video.js代码：

if(Meteor.isClient)
{


Template.video.rendered = function()
{

    videojs("example_video_1",
      {
        "controls" : true,
        "autoplay": true,
        "techOrder" : ["html5", "flash"],
        preload: "auto"
      },
        function()
        {

        }
    )
}

Template.video.helpers({
    cordova: function()
    {
        getBlobURL("/my_vid.mp4", "video/mp4", function(url, blob) 
        {
            $("video")[0].src = url
        });


        return Meteor.isCordova;
    }
    })

function getBlobURL(url, mime, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";

  xhr.addEventListener("load", function() {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: mime } );
    var url = window.URL.createObjectURL(blob);

    callback(url, blob);
  });
  xhr.send();
}



}

这段代码：

function getBlobURL(url, mime, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";

  xhr.addEventListener("load", function() {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: mime } );
    var url = window.URL.createObjectURL(blob);

    callback(url, blob);
  });
  xhr.send();
}

是来自这个 SO question 的解决方案。我尝试实施此解决方案，但它没有解决我的问题。

我也尝试过添加 config.xml 和 mobile-config.js 文件，如 here 所述。

问题似乎与 Cordova 设置错误的 MIME 类型有关，而我之前引用的 SO 问题有一个显然有效但我似乎无法使其工作的解决方案。任何帮助将不胜感激。

Answer 1

为您的视频创建 Blob URL 是正确的方法，但您还必须确保您的 iOS 版本高于 8.1.2。

我升级到 8.2，之后我的代码似乎工作正常。

在 Meteor 生成的 iOS 应用程序中获取本地 HTML5 视频

Getting Local HTML5 Video working in Meteor generated iOS app

javascript

html5-video

ios

cordova

meteor