video_player_web_hls 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

video_player_web_hls #

Supports hls on chrome.

Usage #

...
dependencies:
  ...
  video_player_web_hls: ^0.1.1
  video_player: ^0.10.10

  ...

Add

 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"  type="application/javascript"></script>

in index.html above

 <script src="main.dart.js" type="application/javascript"></script>

dart:io #

The Web platform does not suppport dart:io, so attempts to create a VideoPlayerController.file will throw an UnimplementedError.

Autoplay #

Playing videos without prior interaction with the site might be prohibited by the browser and lead to runtime errors. See also: https://goo.gl/xX8pDD.

Supported Formats #

Different web browsers support different sets of video codecs.

Video codecs? #

Check MDN's Web video codec guide to learn more about the pros and cons of each video codec.

What codecs are supported? #

Visit caniuse.com: 'video format' for a breakdown of which browsers support what codecs. You can customize charts there for the users of your particular website(s).

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

MPEG-4/H.264

Data on Global support for the MPEG-4/H.264 video format

WebM

Data on Global support for the WebM video format

Ogg/Theora

Data on Global support for the Ogg/Theora video format

AV1

Data on Global support for the AV1 video format

HEVC/H.265

Data on Global support for the HEVC/H.265 video format

Example #

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.initialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

0.1.2 #

  • Added example

0.1.1 #

  • Updated Readme

0.1.0 #

  • Initial release

example/lib/main.dart

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.initialized
              ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  video_player_web_hls: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:video_player_web_hls/video_player_web_hls.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
72
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform android

Because:

  • package:video_player_web_hls/video_player_web_hls.dart that declares support for platforms: web

Package does not support Flutter platform ios

Because:

  • package:video_player_web_hls/video_player_web_hls.dart that declares support for platforms: web

Package does not support Flutter platform linux

Because:

  • package:video_player_web_hls/video_player_web_hls.dart that declares support for platforms: web

Package does not support Flutter platform macos

Because:

  • package:video_player_web_hls/video_player_web_hls.dart that declares support for platforms: web

Package does not support Flutter platform windows

Because:

  • package:video_player_web_hls/video_player_web_hls.dart that declares support for platforms: web

Package not compatible with SDK dart

Because:

  • video_player_web_hls that is a package requiring null.

Health suggestions

Format lib/hls.dart.

Run flutter format to format lib/hls.dart.

Format lib/video_player_web_hls.dart.

Run flutter format to format lib/video_player_web_hls.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_web_plugins 0.0.0
js ^0.6.1+1 0.6.2
meta ^1.1.7 1.1.8 1.2.2
video_player_platform_interface ^2.0.0 2.0.2
Transitive dependencies
collection 1.14.12 1.14.13
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test
pedantic ^1.8.0