WebF Video Player #

HTML5-compatible video player for WebF applications. Wraps Flutter's video_player package with a familiar HTML5 video element API.

Installation #

Add this package to your pubspec.yaml:

dependencies:
  webf_video_player: ^1.0.0

Setup #

Register the custom element in your Flutter app's main function:

import 'package:webf_video_player/webf_video_player.dart';

void main() {
  installWebFVideoPlayer();
  runApp(MyApp());
}

Usage #

Basic Example #

<webf-video-player
  src="https://example.com/video.mp4"
  controls
></webf-video-player>

With All Options #

<webf-video-player
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  controls
  autoplay
  muted
  loop
  volume="0.8"
  playback-rate="1.0"
  object-fit="contain"
></webf-video-player>

JavaScript Control #

const video = document.querySelector('webf-video-player');

// Play/Pause
video.play();
video.pause();

// Seek to 30 seconds
video.currentTime = 30;

// Adjust volume
video.volume = 0.5;
video.muted = true;

// Change playback speed
video.playbackRate = 1.5;

// Listen to events
video.addEventListener('play', () => console.log('Playing'));
video.addEventListener('pause', () => console.log('Paused'));
video.addEventListener('ended', () => console.log('Ended'));
video.addEventListener('timeupdate', (e) => {
  console.log('Current time:', e.detail.currentTime);
});
video.addEventListener('error', (e) => {
  console.error('Error:', e.detail.message);
});

Properties #

Read-only Properties #

Events #

Methods #

Source URL Protocols #

Supported Formats #

The supported video formats depend on the platform:

Platform Configuration #

iOS #

Add to ios/Runner/Info.plist for network video playback:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Android #

Add to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

License #

Apache License 2.0