video_player_web_hls

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Uma implementação de plataforma web do pacote video_player que adiciona suporte a HLS (HTTP Live Streaming) para o Chrome e outros navegadores modernos. Permite a reprodução contínua de fluxos HLS em aplicativos web do Flutter, estendendo a funcionalidade básica do video_player para lidar com protocolos de streaming adaptativo. Este pacote foi projetado especificamente para ambientes web onde o suporte nativo ao HLS pode ser limitado ou inconsistente.

Casos de uso

Reproduzindo fluxos HLS em aplicativos web do Flutter
Transmissão ao vivo de conteúdo de vídeo
Suporte à transmissão adaptativa de taxa de bits
Integração com fluxos de trabalho existentes do video_player
Habilitar compatibilidade HLS entre navegadores

Principais recursos

Suporte de stream HLS na web
Compatibilidade com Chrome e navegadores modernos
Integração contínua com video_player
Reprodução com taxa de bits adaptativa
Implementação leve e focada

Indicado para

Desenvolvedores Flutter direcionados para plataformas da web
Aplicativos que exigem reprodução de vídeo HLS
Projetos usando streaming adaptativo
Desenvolvedores criando experiências web centradas em vídeo
Equipes que precisam de suporte confiável ao HLS na web

Considerações

Limitado apenas à plataforma da web
Requer navegador compatível (por exemplo, Chrome)
Depende da biblioteca externa HLS.js
Pode ser necessário configuração adicional para configurações complexas de streaming
Não adequado para plataformas móveis ou desktop

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Supports hls on chrome and other browsers.

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

WebM

Ogg/Theora

AV1

HEVC/H.265

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();
  }
}

Buscar pacotes, repositórios e categorias de apps