まつまるまつまる

どうも、まつまるです。今回はデバイスから選択した動画をvideo_playerchewieを組み合わせて再生してみます。

Chewieを使えば、デフォルトで再生速度や15秒スキップ、全画面表示がコントロールできます。video_playerだけだと再生のコントローラーも自作しなければなりません。

参考にした記事はこちらです。

そして、今回作成したプログラムはGithubにあげています。

この記事で学べること
📲カメラ&ギャラリーから動画取得
✈️画面推移
📺動画の再生
スポンサーリンク

準備の準備

dependenciesにパッケージを追加

pubspec.yamlにコピペして、Pub getを押して、パッケージをgetしましょう!

video_player: ^1.0.1

chewie: ^0.12.2

chewieはiOSエミュレータでは上手く動作しないみたいなのでご注意を。

動画のソースは、assetsfilesnetworkに対応しています。僕は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に来たら実行するものです。

_futureinitVideoPlayer()が何者かというと・・・

細かいところまで覚える必要はないので、さらっと流しましょう。

The requested URL was not found on this server.と出てきたら動画のパスの型(File型、String型)に注意。僕はやらかしてました。笑

動画を再生!

FutureBuilder_futureを呼び出して、初期化完了したら動画が再生されます。これで完了です。

比率そのままで画面サイズいっぱいに動画を表示したければAspectRatioを使いましょう。

スポンサーリンク

まとめ

やってみると意外と簡単でした。動画の再生で引っ掛かるのはデータの型かな〜と個人的には思います。
コード全文が気になる方はgithubを見てください。