Stream Videos Securely in Flutter with Custom Controls

{ late VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.network( 'https://example.com/your-video.mp4', )..initialize().then((_) { setState(() {}); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Video Player')), body: Center( child: _controller.value.isInitialized ? AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ) : CircularProgressIndicator(), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } Key Improvements : Uses VideoPlayerController.networkUrl with HTTP headers to support token-based authentication. Supports HLS (m3u8) streaming for segmented streaming and is compatible with DRM. Handles video load errors gracefully by showing a message. Custom controls include play/pause and 10-second rewind/forward with position bounds checking. Add Custom Controls The default player doesn't have buttons, so let's add our own. We'll make a simple row of controls below the video. Add this to your build method, right after the AspectRatio: Column( children: [ AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ IconButton( icon: Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow), onPressed: () { setState(() { _controller.value.isPlaying ? _controller.pause() : _controller.play(); }); }, ), IconButton( icon: Icon(Icons.replay_10), onPressed: () { _controller.seekTo(_controller.value.position - Duration(seconds: 10)); }, ), IconButton( icon: Icon(Icons.forward_10), onPressed: () { _controller.seekTo(_controller.value.position + Duration(seconds: 10)); }, ), ], ), ], ) Now you have play/pause, rewind 10 seconds, and fast-forward 10 seconds buttons. They update based on the video's state. You can tap them to control playback. This keeps the interface clean and lets users interact directly. Secure Your Video Streams To keep videos safe, use secure connections. Always load videos over HTTPS. If your server requires a login, add authentication. For instance, if you need a token, modify the controller like this: _controller = VideoPlayerController.network( 'https://example.com/your-video.mp4?token=your_secure_token', ); Get the token from your app's login system. This ensures only logged-in users can access the video. Also, consider encrypting videos on your server if they're sensitive. Flutter handles the playback, but security starts at the source. If you want to prevent downloading, stream the video in segments. Tools like HLS (HTTP Live Streaming) break videos into small parts, making it harder to save the whole thing. Set up your server to support HLS, and point the controller to the playlist URL. Handle Errors for Better Playback Videos don't always load perfectly. Add error handling to your controller: _controller = VideoPlayerController.network( 'https://example.com/your-video.mp4', )..initialize().then((_) { setState(() {}); }).catchError((error) { // Show an error message print('Video failed to load: $error'); }); In the build method, check for errors and show a message if needed. For better quality, let users choose resolutions if your video has multiple. You can add a dropdown to switch sources. Finally, test on real devices. Videos behave differently on phones versus emulators. Run your app, play the video, and tweak the controls until they feel right. This setup gives you a solid, secure way to stream videos with full control in Flutter.

Boost Campaign Performance Through Video