Skip to content

Latest commit

 

History

History
138 lines (109 loc) · 4.02 KB

README.md

File metadata and controls

138 lines (109 loc) · 4.02 KB
Raw

Flutter Video.js player with theme support

Flutter plugin for use Video.js in flutter web with theme support

Installation

Add it to your package's pubspec.yaml file

dependencies:
  video_js_themed: ^0.0.1

Web

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

    <link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>

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.">

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

	<title>example</title>

	<link rel="manifest" href="manifest.json">
    <link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">          <!-- Add this line-->
    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">       <!-- Add this line-->
    <script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>                     <!-- Add this line-->
</head>

Note See usage example in video_js plugin

Then do this in main method :

void main() {
  // this line need for javascript's call backs
  VideoJsResults().init();
  runApp(MyApp());
}

Example

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

void main(){
  VideoJsResults().init();
  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,
        aspectRatio: '16:9',
        fluid: false,
        language: 'en',
        liveui: false,
        notSupportedMessage: 'this movie type not supported',
        preferFullWindow: false,
        responsive: false,
        sources: [Source("https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8",
            "application/x-mpegURL")],
        suppressNotSupportedError: false));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video JS with theme 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,
              theme: 'vjs-theme-fantasy'
            )
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _videoJsController.isPaused((isPlaying) {
              isPlaying != 'true'
                  ? _videoJsController.pause()
                  : _videoJsController.play();
            });
          },
         child: const 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! Original video_js