Skip to content

Commit 947789d

Browse files
authored
[video_player_web] Document video scrubbing and range requests. (flutter#6128)
1 parent cf8a3f3 commit 947789d

File tree

3 files changed

+63
-13
lines changed

3 files changed

+63
-13
lines changed

packages/video_player/video_player_web/CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## 2.0.12
2+
3+
* Updates the `README` with:
4+
* Information about a common known issue: "Some videos restart when using the
5+
seek bar/progress bar/scrubber" (Issue [#49630](https://github.com/flutter/flutter/issues/49360))
6+
* Links to the Autoplay information of all major browsers (Chrome/Edge, Firefox, Safari).
7+
18
## 2.0.11
29

310
* Improves handling of videos with `Infinity` duration.

packages/video_player/video_player_web/README.md

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,92 @@ The web implementation of [`video_player`][1].
55
## Usage
66

77
This package is [endorsed](https://flutter.dev/docs/development/packages-and-plugins/developing-packages#endorsed-federated-plugin),
8-
which means you can simply use `video_player`
9-
normally. This package will be automatically included in your app when you do.
8+
which means you can simply use `video_player` normally. This package will be
9+
automatically included in your app when you do.
1010

11-
## dart:io
11+
## Limitations on the Web platform
1212

13-
The Web platform does **not** suppport `dart:io`, so attempts to create a `VideoPlayerController.file` will throw an `UnimplementedError`.
13+
Video playback on the Web platform has some limitations that might surprise developers
14+
more familiar with mobile/desktop targets.
1415

15-
## Autoplay
16-
Playing videos without prior interaction with the site might be prohibited
17-
by the browser and lead to runtime errors. See also: https://goo.gl/xX8pDD.
16+
In no particular order:
1817

19-
## Mixing audio with other audio sources
18+
### dart:io
2019

21-
The `VideoPlayerOptions.mixWithOthers` option can't be implemented in web, at least at the moment. If you use this option it will be silently ignored.
20+
The web platform does **not** suppport `dart:io`, so attempts to create a `VideoPlayerController.file`
21+
will throw an `UnimplementedError`.
22+
23+
### Autoplay
24+
25+
Attempts to start playing videos with an audio track (or not muted) without user
26+
interaction with the site ("user activation") will be prohibited by the browser
27+
and cause runtime errors in JS.
28+
29+
See also:
30+
31+
* [Autoplay policy in Chrome](https://developer.chrome.com/blog/autoplay/)
32+
* MDN > [Autoplay guide for media and Web Audio APIs](https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide)
33+
* Delivering Video Content for Safari > [Enable Video Autoplay](https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari#3030251)
34+
* More info about "user activation", in general:
35+
* [Making user activation consistent across APIs](https://developer.chrome.com/blog/user-activation)
36+
* HTML Spec: [Tracking user activation](https://html.spec.whatwg.org/multipage/interaction.html#sticky-activation)
37+
38+
### Some videos restart when using the seek bar/progress bar/scrubber
39+
40+
Certain videos will rewind to the beginning when users attempt to `seekTo` (change
41+
the progress/scrub to) another position, instead of jumping to the desired position.
42+
Once the video is fully stored in the browser cache, seeking will work fine after
43+
a full page reload.
44+
45+
The most common explanation for this issue is that the server where the video is
46+
stored doesn't support [HTTP range requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests).
47+
48+
> **NOTE:** Flutter web's local server (the one that powers `flutter run`) **DOES NOT** support
49+
> range requests, so all video **assets** in `debug` mode will exhibit this behavior.
50+
51+
See [Issue #49360](https://github.com/flutter/flutter/issues/49360) for more information
52+
on how to diagnose if a server supports range requests or not.
53+
54+
### Mixing audio with other audio sources
55+
56+
The `VideoPlayerOptions.mixWithOthers` option can't be implemented in web, at least
57+
at the moment. If you use this option it will be silently ignored.
2258

2359
## Supported Formats
2460

2561
**Different web browsers support different sets of video codecs.**
2662

2763
### Video codecs?
2864

29-
Check MDN's [**Web video codec guide**](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs) to learn more about the pros and cons of each video codec.
65+
Check MDN's [**Web video codec guide**](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs)
66+
to learn more about the pros and cons of each video codec.
3067

3168
### What codecs are supported?
3269

33-
Visit [**caniuse.com: 'video format'**](https://caniuse.com/#search=video%20format) for a breakdown of which browsers support what codecs. You can customize charts there for the users of your particular website(s).
70+
Visit [**caniuse.com: 'video format'**](https://caniuse.com/#search=video%20format)
71+
for a breakdown of which browsers support what codecs. You can customize charts
72+
there for the users of your particular website(s).
3473

3574
Here's an abridged version of the data from caniuse, for a Global audience:
3675

3776
#### MPEG-4/H.264
77+
3878
[![Data on Global support for the MPEG-4/H.264 video format](https://caniuse.bitsofco.de/image/mpeg4.png)](https://caniuse.com/#feat=mpeg4)
3979

4080
#### WebM
81+
4182
[![Data on Global support for the WebM video format](https://caniuse.bitsofco.de/image/webm.png)](https://caniuse.com/#feat=webm)
4283

4384
#### Ogg/Theora
85+
4486
[![Data on Global support for the Ogg/Theora video format](https://caniuse.bitsofco.de/image/ogv.png)](https://caniuse.com/#feat=ogv)
4587

4688
#### AV1
89+
4790
[![Data on Global support for the AV1 video format](https://caniuse.bitsofco.de/image/av1.png)](https://caniuse.com/#feat=av1)
4891

4992
#### HEVC/H.265
50-
[![Data on Global support for the HEVC/H.265 video format](https://caniuse.bitsofco.de/image/hevc.png)](https://caniuse.com/#feat=hevc)
5193

94+
[![Data on Global support for the HEVC/H.265 video format](https://caniuse.bitsofco.de/image/hevc.png)](https://caniuse.com/#feat=hevc)
5295

5396
[1]: ../video_player

packages/video_player/video_player_web/pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: video_player_web
22
description: Web platform implementation of video_player.
33
repository: https://github.com/flutter/plugins/tree/main/packages/video_player/video_player_web
44
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+video_player%22
5-
version: 2.0.11
5+
version: 2.0.12
66

77
environment:
88
sdk: ">=2.12.0 <3.0.0"

0 commit comments

Comments
 (0)