Playing Vimeo videos in Flutter

Question

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)

Solution

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.

   

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

Comments

[thusith.92]

I have created a test version of a vimeo player. Feel free to fork and modify! github.com/ThuAbLKA/flutter-vimeo-player

[Jyo]

@Rahul Devanavar I am using Solution 1: PRO members have access to direct video file links. As is know Vimeo does not support, nor recommend using URLs. Do they change URLs without any prior notification even for PRO members?

[Galeb Nassri]

Thank you, trying the second solution but the config API is not responding to private videos even with private links, any workaround Thanks again

[Jithin Joy]

is there any option available to play private Vimeo video?

[Rahul Devanavar]

Yes you can use config api

[drpawelo]

pub dev is here: https://pub.dev/packages/vimeoplayer