Flutter HLS视频流播放与Swarm云集成插件video_player_web_hls_swarm_cloud的使用

swarm_cloud_video_player_hls

A fork of video_player_web_hls to support hls settings.

video_player_web_hls

支持在Chrome和其他浏览器上播放HLS。

使用

dependencies:
  video_player_web_hls: ^0.1.1
  video_player: ^0.10.10

在index.html文件中添加以下脚本：

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

确保该脚本位于以下脚本之前：

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

dart:io

Web平台不支持dart:io，因此尝试创建VideoPlayerController.file将抛出UnimplementedError。

自动播放

在网站未与用户交互的情况下播放视频可能会被浏览器禁止，并可能导致运行时错误。更多信息请参阅：https://goo.gl/xX8pDD。

支持的格式

不同的Web浏览器支持不同的视频编解码器集。

视频编解码器？

了解更多关于每种视频编解码器的优缺点，请查看MDN的Web视频编解码器指南。

支持哪些编解码器？

访问caniuse.com: 'video format’了解各浏览器支持的编解码器。您可以自定义图表以适应您特定网站的用户群。

以下是来自caniuse的缩略数据，适用于全球观众：

MPEG-4/H.264

WebM

Ogg/Theora

AV1

HEVC/H.265

示例

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

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

class VideoApp extends StatefulWidget {
  [@override](/user/override)
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    try {
      _controller = VideoPlayerController.network(
          'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8')
        ..initialize().then((_) {
          // 确保视频初始化后显示第一帧，即使尚未按下播放按钮。
          setState(() {});
        });
      _controller.setVolume(0.0);
    } catch (e) {
      print(e);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? 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](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

示例代码

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](/user/override)
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    try {
      // 初始化HLS视频流
      _controller = VideoPlayerController.network(
          'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8')
        ..initialize().then((_) {
          // 确保视频初始化后显示第一帧
          setState(() {});
        });
      // 设置音量为0.0
      _controller.setVolume(0.0);
    } catch (e) {
      print(e); // 捕获并打印异常
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(), // 如果未初始化，显示空容器
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              if (_controller.value.isPlaying) {
                _controller.pause(); // 如果正在播放，暂停视频
              } else {
                _controller.play(); // 如果已暂停，播放视频
              }
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow, // 动态显示播放或暂停图标
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose(); // 释放资源
  }
}