我正在使用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问题有一个显然有效的解决方案,但我似乎无法让它工作。任何帮助将不胜感激。
答案 0 :(得分:0)
为您的视频创建Blob网址是正确的选择,但您还必须确保您的iOS版本高于8.1.2。
我升级到8.2,之后我的代码似乎工作正常。