CODEWITHSUNDEEP
androidflutterdartvimeoflutter-web
Teekam Suthar
Teekam Suthar

Reputation: 459

Playing Vimeo videos in Flutter

I'm trying to play vimeo videos in flutter app using the video_player plugin but got no success, it's throwing bunch of errors. please help me how I might go about implementing this in flutter app? using webview or any plugin etc? perhaps a code snippet would be huge help for me!

here is my code snippet 

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://vimeo.com/{some-video-id}')
      ..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();
  }
}

THE ERROR IN DEBUG CONSOLE -

E/AccessibilityBridge(28662): VirtualView node must not be the root node. E/ExoPlayerImplInternal(28662): Source error. E/ExoPlayerImplInternal(28662): com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 404 E/ExoPlayerImplInternal(28662): at com.google.android.exoplayer2.upstream.DefaultHttpDataSource.open(DefaultHttpDataSource.java:300) E/ExoPlayerImplInternal(28662): at com.google.android.exoplayer2.upstream.StatsDataSource.open(StatsDataSource.java:83) E/ExoPlayerImplInternal(28662): at com.google.android.exoplayer2.source.ExtractorMediaPeriod$ExtractingLoadable.load(ExtractorMediaPeriod.java:885) E/ExoPlayerImplInternal(28662): at com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:381) E/ExoPlayerImplInternal(28662): at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167) E/ExoPlayerImplInternal(28662): at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641) E/ExoPlayerImplInternal(28662): at java.lang.Thread.run(Thread.java:919)

Upvotes: 12

Views: 19840

Answers (3)

ritsapp
ritsapp

Reputation: 108

You can use vimeo_player_flutter package to achieve this. It is easy & supports Android and IOS platforms. It works based on webview.

Refer this link for more details on this.

Upvotes: 0

Cristiano Pimenta
Cristiano Pimenta

Reputation: 11

Install vimeoplayer: ^0.1.8 on pubspec

return Scaffold(
        appBar: AppBar(title: Text('Video EasyRider')),
       body: ListView(children: <Widget>[
          VimeoPlayer(id: '123456789', autoPlay: false),
        ]));
  }

Upvotes: 0

Rahul Devanavar
Rahul Devanavar

Reputation: 4165

You cant use Vimeo URL https://vimeo.com/{some-video-id}. VideoPlayerController requires the streamable video URL.

Solution 1

Required premium account of Vimeo

  1. go to https://vimeo.com/manage/ and select the video you want to play
  2. select the distribution tab from the left side panel.
  3. select video file link

  4. select the play video.. copay the video link(its the mp4 stealable video link)..use this URL for VideoPlayerController.

    enter image description here

Solution 2

Video link will expire in every 15 mins

  1. call the API https://player.vimeo.com/video/{video_id}/config you will get the JSON response. enter image description here
  2. progressive object you will get mp4 video url .

Solution 3

  1. Replace the video controller with webivew give this url https://vimeo.com/{some-video-id} ..enable the javascript, video will play in webview .

Upvotes: 29

Related Questions