[video_player_web_hls] Unable to play hls vidoes in web

Question

[video_player_web_hls] Unable to play hls vidoes in web

ale-russ-kabbee opened this issue 3 years ago · 6 comments

Below is the code I'm using

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();
    try {
      _controller = VideoPlayerController.network(
          'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8')
        ..initialize().then((_) {
          // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
          setState(() {});
        });
      _controller!.setVolume(0.0);
    } catch (e) {
      print(e);
    }
  }

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

Can anyone help me how to solve this issues

Answer 1 · 2021-10-13T16:59:15.000Z

You have not included

In index.html

Answer 2 · 2021-10-13T17:03:55.000Z

<!DOCTYPE html>
<html>
  <head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
    <base href="/" />

    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta name="description" content="A new Flutter project." />

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="demotest" />
    <link rel="apple-touch-icon" href="icons/Icon-192.png" />

    <title>demotest</title>
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>
    <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->

    <script>
      var serviceWorkerVersion = null;
      var scriptLoaded = false;
      function loadMainDartJs() {
        if (scriptLoaded) {
          return;
        }
        scriptLoaded = true;
        var scriptTag = document.createElement("script");
        scriptTag.src = "main.dart.js";
        scriptTag.type = "application/javascript";
        document.body.append(scriptTag);
      }

      if ("serviceWorker" in navigator) {
        // Service workers are supported. Use them.
        window.addEventListener("load", function () {
          // Wait for registration to finish before dropping the <script> tag.
          // Otherwise, the browser will load the script multiple times,
          // potentially different versions.
          var serviceWorkerUrl =
            "flutter_service_worker.js?v=" + serviceWorkerVersion;
          navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener("statechange", () => {
                if (serviceWorker.state == "activated") {
                  console.log("Installed new service worker.");
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing ?? reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log("New service worker available.");
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log("Loading app from service worker.");
              loadMainDartJs();
            }
          });

          // If service worker doesn't succeed in a reasonable amount of time,
          // fallback to plaint <script> tag.
          setTimeout(() => {
            if (!scriptLoaded) {
              console.warn(
                "Failed to load app from service worker. Falling back to plain <script> tag."
              );
              loadMainDartJs();
            }
          }, 4000);
        });
      } else {
        // Service workers not supported. Just drop the <script> tag.
        loadMainDartJs();
      }
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/hls.js@latest"
      type="application/javascript"
    ></script>
  </body>
</html>

Answer 3 · 2021-10-13T17:04:50.000Z

I added <script src="https://cdn.jsdelivr.net/npm/hls.js@latest" type="application/javascript"></script> but the problem is still there

Answer 4 · 2021-10-13T17:10:43.000Z

Try adding this script tag before end of head. If that doesn't work i will check this on 20th .

Answer 5 · 2021-10-13T17:13:47.000Z

I tried still not working

Answer 6 · 2021-10-14T05:49:37.000Z

Fixed the issue. Apparently all it needed was flutter clean and now its working as expected