まつまる どうも、まつまるです。今回はデバイスから選択した動画をvideo_playerとchewieを組み合わせて再生してみます。
Chewieを使えば、デフォルトで再生速度や15秒スキップ、全画面表示がコントロールできます。video_playerだけだと再生のコントローラーも自作しなければなりません。
参考にした記事はこちらです。
そして、今回作成したプログラムはGithubにあげています。
Contribute to MatsumaruTsuyoshi/flutter_video_play_demo development by creating an account on GitHub.
📲カメラ&ギャラリーから動画取得
✈️画面推移
📺動画の再生
準備の準備
dependenciesにパッケージを追加
pubspec.yamlにコピペして、Pub getを押して、パッケージをgetしましょう！
video_player: ^1.0.1
Flutter plugin for displaying inline video with other Flutter widgets on Android, iOS, and web.
chewie: ^0.12.2
A video player for Flutter with Cupertino and Material play controls
chewieはiOSエミュレータでは上手く動作しないみたいなのでご注意を。
動画のソースは、assets、files、networkに対応しています。僕はfilesにStringを入れてエラーを起こしたのでデータの型には要注意です。
パッケージをimport
import ‘package:chewie/chewie.dart’;
import ‘package:video_player/video_player.dart’;
Chewieとvideo_playerを使うところでインポートしましょう。
iosの準備
<project root>/ios/Runner/Info.plist:に以下のコードをコピペしてください。
・ギャラリー/ライブラリにアクセスしていいか確認する
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
カメラを使用する場合は以下も追加してください。
・カメラを使っていいか確認する
<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
・マイクを使っていいか確認する。
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
コードの解説
全体像
これから順に説明してきますが、もし、混乱してきたらここに戻ってきてください。
構成画面
右下のボタンだけ配置しました。実際のコード↓。.galleryを.cameraに変更すればカメラが起動します。
FloatingActionButtonを押せば、getVideoを実行します。
ギャラリーから動画を選択
image_pickerを使って、ギャラリーから動画を吸い上げます。
動画をストレージパスにコピー
この過程は動画をアプリ内に保存したい時に有効です。けっこう便利なので知っておいて損はないかも。
localPathが呼び出されると以下を実行。
画面推移
Navigatorを使ってclass VideoItemページに移動します。このとき動画のパスを抱えて渡します。
動画再生に必要な初期化
VideoItemに移動したらまずは初期化が必要です。動画再生するコードよりも初期化のコードの方が長いので踏ん張りどころです！
まずは、VideoItemに来たら実行するものです。
_futureとinitVideoPlayer()が何者かというと・・・
細かいところまで覚える必要はないので、さらっと流しましょう。
The requested URL was not found on this server.と出てきたら動画のパスの型（File型、String型）に注意。僕はやらかしてました。笑
動画を再生！
FutureBuilderで_futureを呼び出して、初期化完了したら動画が再生されます。これで完了です。
比率そのままで画面サイズいっぱいに動画を表示したければAspectRatioを使いましょう。
まとめ
やってみると意外と簡単でした。動画の再生で引っ掛かるのはデータの型かな〜と個人的には思います。
コード全文が気になる方はgithubを見てください。
