[video_player] Add html 5 video poster support (thumbnail) as a VideoPlayerWebOptions (#8940)

This PR adds support for the `poster` attribute on web by introducing a `poster` field in `VideoPlayerWebOptions`. It allows setting a thumbnail image for videos using the native HTML5 `poster` property, improving the out-of-the-box web experience.

Fixes flutter/flutter#166232

## Pre-Review Checklist

[^1]: Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling.

Author: Ortes

packages/video_player/video_player_web/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 2.4.0
 
+* Adds HTML5 video poster support as a VideoPlayerWebOptions.
 * Updates minimum supported SDK version to Flutter 3.27/Dart 3.6.
 
 ## 2.3.5

packages/video_player/video_player_web/example/integration_test/video_player_test.dart

@@ -434,6 +434,78 @@ void main() {
         });
       });
 
+      group('poster', () {
+        testWidgets('when null expect no poster attribute',
+            (WidgetTester tester) async {
+          await player.setOptions(
+            const VideoPlayerWebOptions(),
+          );
+
+          expect(video.poster, isEmpty);
+          expect(video.getAttribute('poster'), isNull);
+        });
+
+        testWidgets('when provided expect poster attribute set',
+            (WidgetTester tester) async {
+          final Uri posterUri = Uri.parse('https://example.com/poster.jpg');
+          await player.setOptions(
+            VideoPlayerWebOptions(
+              poster: posterUri,
+            ),
+          );
+
+          expect(video.poster, posterUri.toString());
+          expect(video.getAttribute('poster'), posterUri.toString());
+        });
+
+        testWidgets('when set to null after having value expect poster removed',
+            (WidgetTester tester) async {
+          final Uri posterUri = Uri.parse('https://example.com/poster.jpg');
+
+          await player.setOptions(
+            VideoPlayerWebOptions(
+              poster: posterUri,
+            ),
+          );
+
+          expect(video.poster, posterUri.toString());
+
+          await player.setOptions(
+            const VideoPlayerWebOptions(),
+          );
+
+          expect(video.poster, isEmpty);
+          expect(video.getAttribute('poster'), isNull);
+        });
+
+        testWidgets('when updated expect poster attribute updated',
+            (WidgetTester tester) async {
+          final Uri initialPoster =
+              Uri.parse('https://example.com/poster1.jpg');
+          final Uri updatedPoster =
+              Uri.parse('https://example.com/poster2.jpg');
+
+          // Set initial poster
+          await player.setOptions(
+            VideoPlayerWebOptions(
+              poster: initialPoster,
+            ),
+          );
+
+          expect(video.poster, initialPoster.toString());
+
+          // Update poster
+          await player.setOptions(
+            VideoPlayerWebOptions(
+              poster: updatedPoster,
+            ),
+          );
+
+          expect(video.poster, updatedPoster.toString());
+          expect(video.getAttribute('poster'), updatedPoster.toString());
+        });
+      });
+
       group('when called first time', () {
         testWidgets('expect correct options', (WidgetTester tester) async {
           await player.setOptions(

packages/video_player/video_player_web/lib/src/video_player.dart

@@ -262,6 +262,10 @@ class VideoPlayer {
     if (!options.allowRemotePlayback) {
       _videoElement.disableRemotePlayback = true;
     }
+
+    if (options.poster != null) {
+      _videoElement.poster = options.poster!.toString();
+    }
   }
 
   void _resetOptions() {
@@ -273,6 +277,7 @@ class VideoPlayer {
       _onContextMenu = null;
     }
     _videoElement.removeAttribute('disableRemotePlayback');
+    _videoElement.removeAttribute('poster');
   }
 
   /// Disposes of the current [web.HTMLVideoElement].

packages/video_player/video_player_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: video_player_web
 description: Web platform implementation of video_player.
 repository: https://github.com/flutter/packages/tree/main/packages/video_player/video_player_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+video_player%22
-version: 2.3.5
+version: 2.4.0
 
 environment:
   sdk: ^3.6.0
@@ -21,7 +21,7 @@ dependencies:
     sdk: flutter
   flutter_web_plugins:
     sdk: flutter
-  video_player_platform_interface: ^6.3.0
+  video_player_platform_interface: ^6.4.0
   web: ">=0.5.1 <2.0.0"
 
 dev_dependencies: