VideoEditor: An Ionic 2 App
📷 📹 ✂️
This is an Ionic 2 app that shows how to use the cordova-plugin-video-editor and cordova-plugin-instagram-assets-picker plugins. It allows transcoding a video with every possible setting the video editor plugin provides as well as trimming, creating thumbnails, and getting video info (width, height orientation, duration, size, & bitrate).
Watch the video here.
How to try the app
Install the the latest beta version of the Ionic CLI:
npm install -g ionic@beta
Clone this repository
git clone https://github.com/rossmartin/video-editor-ionic2
Navigate to the app directory:
Install the dependencies
Add the necessary cordova plugins
ionic plugin add cordova-plugin-camera cordova-plugin-device cordova-plugin-media-capture https://github.com/driftyco/ionic-plugin-keyboard.git cordova-plugin-statusbar cordova-plugin-spinner-dialog cordova-plugin-instagram-assets-picker cordova-plugin-video-editor
The plugins in the package.json aren't being automatically installed when doing
ionic platform install ios. I think this is a bug with the Ionic beta CLI. The
ionic state restore is also not working
From here you can build and run the app on different platforms using the traditional Cordova/Ionic CLI commands (
cordova build ios, etc.). My mac has been having issues getting
ionic build and
ionic emulate to work but
cordova build and
cordova emulate work fine for me. I'm not the only one experiencing this, see here and here.
I have only tested this app on iOS but it should run fine on Android. Transcoding videos on Android will be much slower because the video editor plugin uses ffmpeg on Android. I have had terrible luck with HTML5 videos in the past on Android as well so YMMV there also.
I can't get everything in the app to work with the WkWebView. Setting a time range on a video and the cover frame is still really smooth in iOS 9 on the UIWebView though. One particular issue with the WkWebView is that you cannot set
allowsInlineMediaPlayback to true and this is a problem for HTML5 video.