在我的 Ionic 应用程序中读取存储在 android 本机存储上的视频 [英] Read video stored on android native storage in my Ionic app
问题描述
我正在开发 ionic 3 应用程序,可将视频从服务器下载到设备的本机存储.我用这个 URL 来保存文件:
I am developing ionic 3 app that download videos from server to the device's native storage . i used this URL to save file:
let externalDir = this.file.externalDataDirectory;
文件下载正常,已下载,我可以从设备查看.有关更多详细信息,存储中的文件链接是:
file download is fine it is downloaded and i can view it from the device. for more details the file link in the storage is:
/storage/emulated/0/Android/data/xxxxxxxx/files/VideoTest1/0.mp4
但问题是我想使用 <video>
标签将下载的视频播放到我的应用程序中,我使用相同的链接来查看它,但它不起作用.有什么帮助吗?对不起我的英语
but the problem is i want to play that downloaded video into my app using <video>
tag, i used the same link to view it but it doesn't work. any help?
sorry for my english
推荐答案
我一直在寻找解决方案.我按如下方式解决了这个问题.
I've been searching for a solution. I resolve this issue as follows.
在 platform.ready()
函数之后,我创建了一个目录,如下所示.
After platform.ready()
function I created a directory as follows.
this.file.createDir(this.file.externalDataDirectory , 'Videos', false).then(() => {
// console.log('Directory created successfully');
}).catch(() => {
// console.log('Failed to create directory');
});
在创建的目录中下载视频
To download videos inside the created directory
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { Diagnostic } from '@ionic-native/diagnostic';
...
constructor(private diagnostic: Diagnostic,
private transfer: FileTransfer, private file: File)
download(item) {
let downloadProgress: any;
const fileTransfer: FileTransferObject = this.transfer.create();
const url = encodeURI(item.url);
const targetPath = this.file.externalDataDirectory + 'Videos/' + item.title + '.mp4';
this.diagnostic.requestCameraAuthorization(true).then(() => {
fileTransfer.download(url, targetPath, true).then((entry) => {
// console.log('download complete: ' + entry.toURL());
}, (error) => {
console.log(error);
});
fileTransfer.onProgress((progress) => {
downloadProgress = Math.round((progress.loaded / progress.total) * 100) + '%';
console.log('Downloading progress ...', downloadProgress);
});
}, (error) => {
console.log(error);
});
}
这会在创建的 Videos
文件夹中下载一个文件.您实际上可以通过 Android/data/com.your.app/files/
在设备上找到它.
That downloads a file inside the created Videos
folder. You can actually find that on the device by going Android/data/com.your.app/files/
.
如果您使用的是 android
并且不起作用,请在 FileTransfer.java
file.setReadable(true, false);>.
If you're using android
and that didn't work, add file.setReadable(true, false);
inside FileTransfer.java
.
播放视频以供离线使用确保这些行存在于 index.html
To play the videos for offline usage
Make sure these lines exist in index.html
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; media-src *; connect-src *">
在你的 config.xml
文件中
<access origin="*" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="file://*/*" />
<access origin="cdvfile://*" />
<allow-intent href="*" />
<access origin="*" />
如果不添加它们.
最后在你的视频播放器页面
Then finally in your video player page
<video id="video" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
<source [src]="content" type="video/mp4" />
</video>
在组件中
ionViewDidEnter() {
this.file.listDir(this.file.externalDataDirectory, 'Videos')
.then((data) => {
console.log(data[0]);
this.count = data.length;
const src = data[0].toInternalURL();
this.file.resolveLocalFilesystemUrl(src).then(data => {
this.content = data.toURL();
document.getElementById('video').setAttribute('src', this.content);
console.log('Content path cahnged ', this.content);
}, error => {
console.log('File path error');
})
})
.catch(err => console.log('Directory doesnt exist'));
}
就是这样.我希望有效.
And that's it. I hope that works.
这篇关于在我的 Ionic 应用程序中读取存储在 android 本机存储上的视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!