[Swift]画像、動画を混載したスライドショー【MediaSlider_ios】を作りました

Swift

はじめに

画像単体でUICollectionViewを使ったスライドショーはよくありますが、
画像と動画をまぜたスライドショーを作る機会があったのでリポジトリをアップしました。
個人的にもフォトフレームアプリを作りたいと思っているので、これを使って開発できないかと考えています。

環境

Xcode 14.2
iOS 16.2
Swift 5

仕様

  • 画像表示、動画再生が可能
  • 画像は5秒でスライド、動画は再生終了でスライド
  • 最後までスライドすると最初に戻る
  • 画像(png)、動画(mp4)の動作確認済み

使い方

Exampleフォルダに実装例があります。
Mediumで表示データのインスタンスの配列を作成し、MediaSliderViewControllerconfigureにセットします。
準備が完了するとreadyToPlay```でコールバックされるので、play“で再生を開始します。

class ExampleViewController: UIViewController {
    private let sliderView = MediaSliderViewController()

    private var media: [Medium] = [
        Medium(name: "image1", type: .image),
        Medium(name: "movie1.mp4", type: .movie),
        Medium(name: "movie2.mp4", type: .movie),
        Medium(name: "image2", type: .image),
        Medium(name: "image3", type: .image),
        Medium(name: "movie3.mp4", type: .movie),
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        initialize()
    }

    private func initialize() {
        view.backgroundColor = .white

        sliderView.view.frame = CGRect(x: 0, y: 0, width: view.bounds.width / 2, height: view.bounds.width / 2)
        sliderView.view.center = view.center
        view.addSubview(sliderView.view)

        sliderView.configure(media: media)
        sliderView.readyToPlay = { [weak self] in
            guard let self = self else { return }
            self.sliderView.play()
        }
    }
}

苦労した点

動画の再生タイミングに苦労しました。
UICollectionViewにセルを生成したタイミングで再生を開始するとすべての動画が再生されてしまいます。
そこで動画再生が終わったタイミングでスクロールさせて、アニメーションの終わるタイミングで次の動画を再生させます。
ただその場合、一番最初の動画が再生されないのでMediaSliderViewControllerのview読み込み終了で呼び出しもとにコールバック通知して、そこで再生開始させています。

今後について

スライドショーのアニメーションやメディアタイプの追加(pngとmp4しか動作確認できていないのでそれ以外でも動作するように)ができたらいいなと思います。

コメント

タイトルとURLをコピーしました