學習ionic有一段時間的，之前一直是在別人的簡書博客下天天向上，最近做視頻的時候發現基本的視頻操作的資料很少，自己研究了之后來分享一波，希望可以幫助到各位小伙伴。
ps：我的開發環境：mac10.12，ionic 3.0.4
1.視頻錄制
1.視頻錄制的插件：點擊點擊Up Up
2.插件的集成：
$ ionic cordova plugin add cordova-plugin-video-capture-plus
$ npm install --save @ionic-native/video-capture-plus
3.記得在加哦
4.插件的使用
```
didTakeVideo() {
alert('beginVideo');
constoptions: VideoCapturePlusOptions = {
limit:1,
highquality:true,
portraitOverlay:'assets/img/camera/overlay/portrait.png',
landscapeOverlay:'assets/img/camera/overlay/landscape.png'
}
this.videoCapturePlus.captureVideo(options).then((mediafile) => {
this.videoData= mediafile[0].fullPath;
alert(this.videoData);
this.load.dismiss()
}, (err) => {
alert('videoFaile');
console.log('Something went wrong');
// Handle error
});
}
```
2.圖庫的視頻選擇
1.視頻選擇需要用到的插件：這里這里
2.插件的集成
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
3.同樣不要不要忘記添加哦
4.插件的使用
```
getPicture(options: CameraOptions = {}): Promise {
letops: CameraOptions =Object.assign({
mediaType:this.camera.MediaType.VIDEO,
sourceType:this.camera.PictureSourceType.SAVEDPHOTOALBUM,//圖片來源,CAMERA:拍照,PHOTOLIBRARY:相冊
destinationType:this.camera.DestinationType.FILE_URI,//默認返回base64字符串,DATA_URL:base64? FILE_URI:圖片路徑
}, options);
return newPromise((resolve) => {
this.camera.getPicture(ops).then((videoURL :string) => {
alert('好的好的可以了');
resolve(videoURL);
alert(videoURL);
}, (err) => {
alert('沒有權限,請在設置中開啟權限');
});
});
};
getVideoByPhotoLibrary(options: CameraOptions = {}) {
this.getPicture(Object.assign({
sourceType:this.camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType:this.camera.DestinationType.FILE_URI//DATA_URL: 0 base64字符串, FILE_URI: 1圖片路徑
}, options)).then((vedioURL :string) => {
alert('shoudaoURL');
this.videoData= vedioURL;
alert(this.videoData);
this.load.dismiss()
}).catch(err => {
alert('NOURL');
});
};
```
至此我簡單的分享了ionic視頻基本的錄制和選取，播放的話呢直接用H5的video就可以了，實現以后我發現有一點小小的問題是視頻錄制或者選取成功以后，vedio的播放按鈕會變成可播放，但是視頻的背景圖還沒有現實在播放器中，點擊播放按鈕后可以正常播放，再關閉播放就有視頻的背景圖了，有會解決這個問題的小伙伴，歡迎指教哦。
