Question

我正在开发离子3应用程序，可将视频从服务器下载到设备的本机存储。我用这个URL来保存文件：

let externalDir = this.file.externalDataDirectory;

文件下载很好下载，我可以从设备上查看。有关详细信息，存储中的文件链接为：

/storage/emulated/0/Android/data/xxxxxxxx/files/VideoTest1/0.mp4

但问题是我想使用<video>标签将下载的视频播放到我的应用中，我使用相同的链接查看它但不起作用。任何帮助？对不起我的英文

Answer 1

我一直在寻找解决方案。我解决了这个问题如下。

在platform.ready()函数之后，我创建了一个目录，如下所示。

this.file.createDir(this.file.externalDataDirectory , 'Videos', false).then(() => {
        // console.log('Directory created successfully');
      }).catch(() => {
        // console.log('Failed to create 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/。

在设备上找到它

如果您正在使用android并且无效，请在file.setReadable(true, false);内添加FileTransfer.java。

播放视频以供离线使用确保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="*" />

如果没有添加它们。

最后在您的视频播放器页面

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

  }

就是这样。我希望有效。

Answer 2

如果要访问任何文件以用于移动设备的本机存储。然后，您必须创建要访问的文件夹的本地服务器。

https://ionicframework.com/docs/native/httpd

constructor(public file:File, public ngZone : NgZone, public httpd :Httpd){
}

startLocalServe(){

    let options: HttpdOptions = {
      www_root: this.file.externalDataDirectory.replace('file://',''),
      port: 9000,
      localhost_only: true //if you want to create multiple localhost then false  
    };

    this.httpd.startServer(options).subscribe(url => {
      console.log('Server is live',url); //Server is live http://127.0.0.0.1:9000
      this.ngZone.run(()=>{
        this.localServeUrl = url;
      })

    },error => {
      console.log('Fail to start Server : ',JSON.stringify(error));
    });
  }

现在，您将能够以src =“ http：//127.0.0.0.1：9000 / VideoTest1 / 0.mp4”的形式访问localserveUrl

在app.component.ts中输入代码startLocalServe

this.platform.ready().then(()=>{
startLocalServe();
});

在Ionic app

2 个答案: