Flutter plugin for use Video.js in flutter web

Overview

Flutter Video.js player

Flutter plugin for use Video.js in flutter web

Installation

Add it to your package's pubspec.yaml file

dependencies:
  video_js: ^0.1.1

Web

To implement you need to include Video.js library in the index.html of web section

">
  <link id="videojscss" rel="stylesheet" href="https://unpkg.com/video.js/dist/video-js.css">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>

To support HLS formats you need to add this script too

">
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

Example:

example ">
<head>
	<base href="$FLUTTER_BASE_HREF">

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

	
	<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="example">
	<link rel="apple-touch-icon" href="icons/Icon-192.png">

	<title>exampletitle>

	<link rel="manifest" href="manifest.json">
	<link id="videojscss" rel="stylesheet" href="https://unpkg.com/video.js/dist/video-js.css">    
	<script src="https://unpkg.com/video.js/dist/video.js">script>                               
	<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js">script>      
head>

Note See usage example in video_js plugin

Example

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

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

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

class _VideoAppState extends State<VideoApp> {
  late VideoJsController _videoJsController;

  @override
  void initState() {
    super.initState();
    _videoJsController = VideoJsController("videoId", videoJsOptions: VideoJsOptions(
        controls: true,
        loop: false,
        muted: false,
        poster: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg',
        aspectRatio: '16:9',
        fluid: false,
        language: 'en',
        liveui: false,
        notSupportedMessage: 'this movie type not supported',
        playbackRates: [1, 2, 3],
        preferFullWindow: false,
        responsive: false,
        sources: [Source("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "video/mp4")],
        suppressNotSupportedError: false));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video JS Demo',
      home: Scaffold(
        body: Center(
            child: VideoJsWidget(
              videoJsController: _videoJsController,
              height: MediaQuery.of(context).size.width / 2.5,
              width: MediaQuery.of(context).size.width / 1.5,
            )
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _videoJsController.isPaused((isPlaying) {
              isPlaying 
                  ? videoJsController.pause() 
                  : videoJsController.play();
            });
          },
          child: Icon(Icons.play_arrow,),
        ),
      ),
    );
  }
}

Note: This plugin is still under development, and some APIs might not be available yet. Feedback welcome and Pull Requests are most welcome!

You might also like...

video call with WebRTC and Flutter

video call with WebRTC and Flutter

Video Call Flutter App πŸ“± Description: This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to

Nov 9, 2022

A fully-functional video streaming app made in Flutter using Custom Nodejs backend.

A fully-functional video streaming app  made in Flutter using Custom Nodejs backend.

LAVENDER πŸ“Ί A fully-functional video streaming app like netflix made in Flutter using Custom Nodejs backend. How To Run This Project πŸƒβ€β™‚οΈ Clone the r

Jan 10, 2023

Open source geo based video sharing social app created with Flutter, Supabase and lots of love πŸ’™πŸ’™πŸ’™

Open source geo based video sharing social app created with Flutter, Supabase and lots of love πŸ’™πŸ’™πŸ’™

Spot Take a virtual journey around the world with Spot. Spot is a geo-tagged video sharing app, meaning every video recorded in Spot is saved on a loc

Jan 3, 2023

Video call with WebRTC and Flutter

Video call with WebRTC and Flutter

This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to phone, browser to phone and opposite.

Nov 9, 2022

Fleo - A video calling application developed using flutter🀠

Fleo - A video calling application developed using flutter🀠

Fleo πŸ“Έ Video Calling Application developed using flutter Light and Dark Modes πŸ‘ Join using Room Codes πŸ‘½ One room can accomodate upto 4 persons Powe

Dec 25, 2022

Advanced video player based on video_player and Chewie for flutter

Advanced video player based on video_player and Chewie for flutter

Better Player Advanced video player based on video_player and Chewie. It's solves many typical use cases and it's easy to run. Introduction This plugi

Dec 22, 2021

Sandbox video call application using Flutter and WebRTC

Sandbox video call application using Flutter and WebRTC

Video Call Flutter App πŸ“± Description: This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to

Nov 9, 2022

Base on Vap to play alpha video animation

Base on Vap to play alpha video animation

Backdrop Transparent video animation is currently one of the more popular implementations of animation. Major manufacturers have also open source

Dec 27, 2022

A cloudinatry video url sample project

cloudinary_media_sample A new Flutter project for Cloudinary video url. Getting Started This project is a starting point for a Flutter application. A

Nov 4, 2021
Comments
  • Live streaming - Buffering

    Live streaming - Buffering

    I was wondering how can I set the buffer up for a live stream. For example having an hour buffer where I can scroll up and down through the stream in order to go backa bit if I need to review a certain moment of the stream. Is this possible? Also the control is being hidden from me and just says "live". Is there any way to show the control and set the buffer properly?

    image

    opened by milodude 1
  • dispose error

    dispose error

    When I execute dispose i am getting below error.

    var videoController = VideoJsController("videoId${start+i}", videoJsOptions: VideoJsOptions( controls: true, loop: false, muted: false, poster: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg', aspectRatio: '16:9', fluid: false, language: 'en', liveui: true, notSupportedMessage: 'this movie type not supported', playbackRates: [1, 2, 3], preferFullWindow: false, responsive: false, sources: [Source("mp4UrlSample", "video/mp4")], suppressNotSupportedError: false))

    videoController.dispose();

    I am using list of video controllers in single page.

    TypeError: The element or ID supplied is not valid. (videojs)

    opened by ivanroldanannoson 0
Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Jakub 732 Jan 2, 2023
This is a flutter package of video player. it's a very simple and easy to use.

This is a flutter package of video player. it's a very simple and easy to use.

εˆε†¬ 184 Nov 18, 2022
WebRTC plugin for Flutter Mobile/Desktop/Web

Flutter-WebRTC WebRTC plugin for Flutter Mobile/Desktop/Web Sponsored with ?? by Enterprise Grade APIs for Feeds & Chat. Try the Flutter Chat tutorial

Flutter WebRTC 3.4k Jan 8, 2023
Flutter (web-only at this moment) plugin for recording audio (using the microphone).

Microphone Flutter (web-only at this moment) plugin for recording audio (using the microphone). Getting started To learn more about the plugin and get

null 28 Sep 26, 2022
A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web

AudioPlayer A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web. Online demo Features Android / i

Erick Ghaumez 489 Dec 18, 2022
This Flutter plugin created to show how to use OpenCV and ZXing C++ libraries natively in Flutter with Dart FFI using the camera stream

OpenCV and ZXing C++ libraries natively in Flutter with Dart FFI using the camera stream

Khoren Markosyan 17 Oct 21, 2022
A Flutter plugin to use speech recognition on iOS & Android (Swift/Java)

speech_recognition A flutter plugin to use the speech recognition iOS10+ / Android 4.1+ Basic Example Sytody, speech to todo app Installation Depend o

Erick Ghaumez 331 Dec 19, 2022
Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps.

LiveKit Flutter SDK Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps. This package is published to pub.dev

LiveKit 116 Dec 14, 2022
The video player for Flutter with a heart of gold

chewie The video player for Flutter with a heart of gold. The video_player plugin provides low-level access to video playback. Chewie uses the video_p

Brian Egan 1.6k Jan 7, 2023
Flutter video trimmer package

A Flutter package for trimming videos Features Customizable video trimmer Video playback control Retrieving and storing video file Also, supports conv

Souvik Biswas 349 Jan 3, 2023