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

时间:2015-03-12 17:27:06

标签: javascript ios cordova meteor html5-video

我正在使用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的解决方案。我试图实现这个解决方案,但它没有解决我的问题。

我还尝试按照here所述添加config.xml和mobile-config.js文件。

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

1 个答案:

答案 0 :(得分:0)

为您的视频创建Blob网址是正确的选择,但您还必须确保您的iOS版本高于8.1.2。

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