Skip to content

README.md

Latest commit

 

History

History
97 lines (84 loc) · 3.73 KB

README.md

File metadata and controls

97 lines (84 loc) · 3.73 KB

jwplayer

This repo provides a bridge between Flutter and JWPlayer's native iOS and Android SDKs.

The current behavior of this plugin is to launch a native view fullscreen over the Flutter app and auto play the video from the URL provided. A close button, X, is provided to dismiss the view and return to the Flutter app.

Getting Started

Add the dependency to pubspec.yaml:

The ref shown is the current ref at the time of writing this README.md. If you want the latest, omit that line.

jwplayer:
  git:
    url: https://github.com/KQED/jwplayer-flutter-plugin.git
    ref: 608f02c3c219ed86dfb9257d8360d2a44b423684

Set up a JWPlayer object

final jwPlayerPlugin = JWPlayer();

Initialize JWPlayer with platform license key:

Add the following to initState():

// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
  // Platform messages may fail, so we use a try/catch PlatformException.
  // We also handle the message potentially returning null.
  try {
    await jwPlayerPlugin.init(jwplayerLicenseKey);
  } on PlatformException {
    if (kDebugMode) {
      log('PlatformException in JWPlayer in debug mode');
    }
  }
}

Set up MethodChannel and register for callbacks:

Add the following to initState():

void registerForCallbacks() {
  _pluginCallbacksChannel.setMethodCallHandler(_callbackMethodCallHandler);
}

Future<void> _callbackMethodCallHandler(MethodCall call) async {
  switch (call.method) {
    default:
    Future.delayed(Duration.zero, () {
      final data =
       'Method Call Triggered: ${call.method} with arguments ${call.arguments}';
        log('Method callback message: $data');
    });
  }
}

Play a video:

jwPlayerPlugin.play(url);

Updating the plugin code - iOS:

  • Open example/ios/Runner.xcworkspace in Xcode
  • Edit plugin components:
    • Open directory at Pods > Development Pods > jwplayer > .. > .. > example > ios > .symlinks > plugins > jwplayer > ios > Classes
    • Here you will find JwplayerPlugin.swift and VerticalPlayerViewController.swift
      • JwplayerPlugin.swift handles interactions between the Flutter code, using method channels, and the VerticalPlayerViewController.swift file
    • You can run the plugin's iOS project with Runner.xcworkspace open in Xcode which will launch the plugin example
      • Edit the plugin code with Xcode's error checking, linting, code docs, etc.
    • Alternatively, you can run the plugin example in VsCode by opening the jwplayer-flutter-plugin directory
      • Open main.dart and run the project. The majority of the Flutter code lives direclty in main.dart
    • VerticalPlayerViewController.swift contains all the specific UI and player code for the view that appears in the Flutter project.
      • Any player settings, vertical video properties, like urls, etc, will most likely be updated in this file.
    • To test local plugin changes in the Flutter project, update the jwplayer package details in pubspec.yaml:
      • Replace the git, url, and ref lines with:
        • path: /Users/markfransen/Uptech Studio/KQED/jwplayer-flutter-plugin

Updating the plugin code - Android:

  • Open jwplayer-flutter-plugin/android in Android Studio
  • The following files are where the plugin code lives:
    • CallbackMethods.kt
    • JwPlayerActivity.kt
    • JwplayerPlugin.kt
    • PluginMethods.kt

Updating/running the example app code - Flutter:

  • Open the jwplayer-flutter-plugin in VSCode
  • Open example > lib > main.dart
  • Here we can adjust the UI for the example app, test new changes, for example when captions are added to videos, etc.