Giter Site home page Giter Site logo

sshyran / videoplayback-ios Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ustwo/videoplayback-ios

0.0 2.0 0.0 88.33 MB

Swift AVPlayer wrapper using the VIPER architecture. Currently a work in progress

Home Page: https://ustwo.com/blog/ins-and-outs-of-viper

License: MIT License

Swift 65.76% Objective-C 33.56% Ruby 0.68%

videoplayback-ios's Introduction

license pod pod

Summary

This framework is built using the VIPER (modified to VIPE) architecture. It started as an experiment with the architecture itself and is now a work in progress.

It is a swift wrapper around the AVFoundation framework. Use it to play remote, or local videos in a simple view or feed. Its purpose is to make playing progressive downloads and live streams simpler in your iOS applications

We also wrote a blog post on VIPER itself here: https://ustwo.com/blog/ins-and-outs-of-viper

Disclaimer:

This framework is a work in progress. Unit tests, VIPE refactoring, and bug fixes are pending.

Features

  • Scrub Video
  • Handle play or stop video in main thread
  • Play in UITableView
  • Autoplay video
  • HTTPS support
  • Written in Swift
  • Landscape support
  • Cocoapod support

Requirements

  • iOS 10.0 or later
  • Xcode 8.3 or later

Getting Started

  • Go to the "DemoVideoPlaybackKit" folder, run pod install. Open the workspace and build

About

The VIPER architecture has been talked about in the iOS community; however, it is uncommonly used. We wanted to gain an in depth understanding of this design pattern and see what the buzz was all about. As a result, we decided to test the following hypothesis:

As a developer I would like to use the VIPER design pattern to build reusable modules

We then decided to experiment with VIPER & playing video content. Playing video involves UI updates, data downloading & data syncrhonization. These complexities & interactions proved themselves to be worthwhile candidate for a VIPER structured module.

Communication

  • If you found a bug, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Installation

  • pod install 'VideoPlaybackKit'

How To Use

import VideoPlaybackKit

Play a single video in a view - add a single view to your screen which contains video content

  1. Define the Video Type (local or remote). This is the ENTITY represented in the VIPER structure
let videoType = VPKVideoType.local(videoPathName: "Elon_Musk", fileType: "mp4", placeholderImageName: "elon_1")
  1. Build the video view
VPKVideoPlaybackBuilder.vpk_buildVideoView(for: videoType, shouldAutoplay: self.shouldAutoPlay, playbackBarTheme: self.toolBarTheme) { [weak self] (videoView) in

        self?.view.addSubview(videoView)
        videoView.snp.makeConstraints({ (make) in
        make.height.equalTo(self?.view.snp.height).dividedBy(2)
        make.top.equalTo(self?.view.snp.top).offset(10)
        make.left.right.equalTo(self?.view)
    })
}

Play a video in a feed

  1. Create a UITabieViewCell that conforms to VPKViewInCellProtocol
class VideoTableViewCell: UITableViewCell, VPKViewInCellProtocol {
    static let identifier = "VideoCell"
    var videoView: VPKVideoView? {
        didSet {
            self.setupVideoViewConstraints()
            layoutIfNeeded()
        }
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        prepareForVideoReuse() //Extension default
    }
}
  1. Register cell in UIViewController, set up tableview. Add videoview to cell
    tableView.register(VideoTableViewCell.self, forCellReuseIdentifier: VideoTableViewCell.identifier)
    tableView.estimatedRowHeight = 400
    tableView.rowHeight = UITableViewAutomaticDimension

    datasource.asObservable().bind(to: tableView.rx.items(cellIdentifier: VideoTableViewCell.identifier)) { index, model, cell in
            
        guard let cell = cell as? VideoTableViewCell else { return }

        VPKVideoPlaybackBuilder.vpk_buildViewInCell(for: model, at: NSIndexPath(item: index, section: 0), completion: { [weak self] (videoView) in
                cell.videoView = videoView
                cell.layoutIfNeeded()
        })}.addDisposableTo(disposeBag)

        tableView.rx.setDelegate(self)
}

Autoplay Videos in a feed

  1. Conform to the VPKTableViewVideoPlaybackScrollable protocol

Implement the following:

extension FeedViewController: VPKTableViewVideoPlaybackScrollable {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        handleAutoplayInTopVideoCell() // default implementation
        trackVideoViewCellScrolling() // default implementation
    }   

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if shouldAutoplayVideos {
            handleAutoplayInTopVideoCell()
        }
    }
}

Play video in feed, pre-fetch video asset data. *** Recommended especially for auto playing video in a feed ***

  1. Create a VPKTableViewPrefetchSynchronizer object
videoPrefetcher = VPKTableViewPrefetchSynchronizer(videoItems: datasource.value)
  1. Conform to the UITableViewDataSourcePrefetching tableview protocool
tableView.prefetchDataSource = self

extension FeedViewController: UITableViewDataSourcePrefetching {

    func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
        videoPrefetcher?.tableView(tableView, prefetchRowsAt: indexPaths)
    }

    func tableView(_ tableView: UITableView, cancelPrefetchingForRowsAt indexPaths: [IndexPath]) {
        videoPrefetcher?.tableView(tableView, cancelPrefetchingForRowsAt: indexPaths)
    }
}

Contact:

videoplayback-ios's People

Contributors

socohesive avatar lukedurrant avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.