Q&A
実現したいこと
cordovaでスマホアプリを作成しています。
iOSアプリでUIWebViewが使用できなくなるため、WKWebViewで動くように作り変えています。
videoタグを使用し、撮影した動画を再生したいのですが、うまくいきません。
ご助言お願いします。
######実現したい処理の流れ
- 動画を撮影し後、プレビューを表示する。
- プレビュー確認後、保存ボタンを押して動画を保存する。
- 保存した動画を一覧画面に並べて表示する。
- 一覧画面で動画を押してプレビューを再生する。
問題点
●動画を撮影し後、プレビューを表示する。
→プレビューを再生することができません。
プレイヤーは表示されますが、再生ボタンを押してもプレビューが始まらず、
動画の時間なども「--:--」といった表示になります。
●一覧画面で動画を押してプレビューを再生する。
→こちらも上記と同様に再生することができません。
プレイヤーは表示されますが、再生ボタンを押してもプレビューが始まらず、
動画の時間なども「--:--」といった表示になります。
動画は撮影後AppData/Documents/に保存し、一覧画面表示時にAppData/tmp/にコピーしています。
環境
Cordova v8.1.2 cordova-plugin-camera 2.4.1 cordova-plugin-device 1.1.4 cordova-plugin-file 4.3.1 cordova-plugin-file-transfer 1.6.1 cordova-plugin-inappbrowser 4.0.0 cordova-plugin-media 2.4.1 cordova-plugin-media-capture 1.4.1 cordova-plugin-migrate-localstorage 0.0.2 cordova-plugin-wkwebview-engine 1.2.1 cordova-plugin-wkwebview-file-xhr 2.1.4 cordova-plugin-wkwebviewxhrfix 0.1.0 ※プラグインは抜粋したものになります。
ソース
Config.xmlに以下の内容を設定
<preference name="WKWebViewOnly" value="true" /> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> <preference name="AllowInlineMediaPlayback" value="true" /> <feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <engine name="ios" spec="~5.1.1" />
動画を表示しているページ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> $(function() { $('#video').attr('src', clickFile); }); </script> </head> <body> <div class="modal-header" data-dismiss="modal" aria-hidden="true"></div> <video id="video" src="" style="width:100%;" controls playsinline webkit-playsinline></video> <div class="modal-footer" data-dismiss="modal" aria-hidden="true"></div> </body> </html>
src要素はJavaScriptを使用して設定しています。
設定後は以下の通りになります。
<div class="modal-header" data-dismiss="modal" aria-hidden="true"></div> <video id="video" src="file:///var/(略)/tmp/movie1.mov" style="width:100%;" controls playsinline webkit-playsinline></video> <div class="modal-footer" data-dismiss="modal" aria-hidden="true"></div>
その他
●UIWebViewを使用していた際は、動画を再生することができました。
→WKWebViewに作り変える過程で以下の修正をしました。
・プラグインの追加
cordova-plugin-wkwebview-engine 1.2.1 cordova-plugin-wkwebview-file-xhr 2.1.4 cordova-plugin-wkwebviewxhrfix 0.1.0
・プラグインの更新
cordova-plugin-inappbrowser 1.2.0 → 4.0.0
・設定を追加
<preference name="WKWebViewOnly" value="true" /> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> <preference name="AllowInlineMediaPlayback" value="true" /> <feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature>
・ソースを修正
「playsinline webkit-playsinline」を追加しました。
<video id="video" src="file:///var/(略)/tmp/movie1.mov" style="width:100%;" controls playsinline webkit-playsinline></video>
●一覧画面の2回目表示以降であれば、プレイヤーに×が表示されていないため、
動画ファイルの読み込み自体は成功していて、設定などが足りず再生することができていないと考えています。
●何か気になる点や、設定漏れなどありましたらご助言お願いします。
あなたの回答
tips
プレビュー
