How play video on VideoView inside ViewPager from server

Question

I try to develop an app that retrieve videos from server and play on videoview inside viewpager, video from raw folder is worked fine but their are 2 issues:

• 1: some video isn't played. or black activity show.
• 2: video is not stop when Page is scrolled.

so how to use URL instead of `

android.resource://mypackagename/video1.mp4

and how to pause/stop when PageIsChanged. any tutorial or any hits i will be thankful for that.

Here my code is Source Code

ViewPagerAdapter.java

import android.content.Context;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnPreparedListener;
import android.net.Uri;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.MediaController;
import android.widget.TextView;
import android.widget.VideoView;

public class ViewPagerAdapter extends PagerAdapter {

    Context context;
    String[] rank;
    String[] country;
    String[] population;
    int[] flag;
    LayoutInflater inflater;
    static int[] arrayvid;
    private VideoView mVideoView;

    public ViewPagerAdapter(Context context, String[] rank, String[] country,
            String[] population, int[] flag, int[] arrayvid) {
        this.context = context;
        this.rank = rank;
        this.country = country;
        this.population = population;
        this.flag = flag;
        this.arrayvid = arrayvid;
    }

    @Override
    public int getCount() {
        return rank.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((LinearLayout) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {

        // Declare Variables
        TextView txtrank;
        TextView txtcountry;
        TextView txtpopulation;
        ImageView imgflag;

        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.viewpager_item, container,
                false);

        // Locate the TextViews in viewpager_item.xml
        txtrank = (TextView) itemView.findViewById(R.id.rank);
        txtcountry = (TextView) itemView.findViewById(R.id.country);
        txtpopulation = (TextView) itemView.findViewById(R.id.population);
        imgflag = (ImageView) itemView.findViewById(R.id.flag);
        mVideoView = (VideoView) itemView.findViewById(R.id.VVExe);

        txtrank.setText(rank[position]);
        txtcountry.setText(country[position]);
        txtpopulation.setText(population[position]);
        imgflag.setImageResource(flag[position]);

        mVideoView.setOnPreparedListener(new OnPreparedListener() {

            @Override
            public void onPrepared(MediaPlayer mp) {
                mp.setLooping(true);
            }
        });

        MediaController mediaController = new MediaController(context, false);
        mediaController.setAnchorView(mVideoView);
        mVideoView.setMediaController(mediaController);
        ((ViewPager) container).addView(itemView);
        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Remove viewpager_item.xml from ViewPager
        ((ViewPager) container).removeView((LinearLayout) object);

    }

    public void pausevideo() {
        mVideoView.stopPlayback();

    }

    public void play(int position) {
        mVideoView.setVideoURI(Uri
                .parse("android.resource://mypackagename/"
                        + arrayvid[position]));
        mVideoView.requestFocus();
        mVideoView.start();

    }
}

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.ImageButton;

public class MainActivity extends Activity {

    // Declare Variables
    ViewPager viewPager;
    PagerAdapter adapter;
    String[] rank;
    private ImageButton play;
    String[] country;
    String[] population;
    int[] flag;
    public int position;
    int[] arrayvid;
    boolean isRunning = true;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Get the view from viewpager_main.xml
        setContentView(R.layout.viewpager_main);
        play = (ImageButton) findViewById(R.id.btnPlayAB);
        // Generate sample data
        rank = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" };

        country = new String[] { "China", "India", "United States",
                "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh",
                "Russia", "Japan" };

        population = new String[] { "1,354,040,000", "1,210,193,422",
                "315,761,000", "237,641,326", "193,946,886", "182,912,000",
                "170,901,000", "152,518,015", "143,369,806", "127,360,000" };

        flag = new int[] { R.drawable.china, R.drawable.india,
                R.drawable.unitedstates, R.drawable.indonesia,
                R.drawable.brazil, R.drawable.pakistan, R.drawable.nigeria,
                R.drawable.bangladesh, R.drawable.russia, R.drawable.japan };

        arrayvid = new int[] { R.raw.basiccrunch, R.raw.bicyclecrunch,
                R.raw.reversecrunch, R.raw.longarmcrunch,
                R.raw.crossovercrunch, R.raw.rightobliquecrunch,
                R.raw.leftobliquecrunch, R.raw.halfcurl,
                R.raw.verticallegcrunch, R.raw.plank };

        // Locate the ViewPager in viewpager_main.xml
        viewPager = (ViewPager) findViewById(R.id.pager);
        // Pass results to ViewPagerAdapter Class
        adapter = new ViewPagerAdapter(MainActivity.this, rank, country,
                population, flag, arrayvid);
        // Binds the Adapter to the ViewPager
        viewPager.setAdapter(adapter);

        play.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                if (isRunning) {
                    ((ViewPagerAdapter) adapter).play(position);
                    isRunning = false;
                    play.setBackgroundResource(R.drawable.pausee);
                } else {
                    ((ViewPagerAdapter) adapter).pausevideo();
                    isRunning = true;
                    play.setBackgroundResource(R.drawable.playy);
                }

            }
        });

    }

}

viewpager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp"
    android:weightSum="10" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1.6"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="3"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/ranklabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/ranklabel" />

                <TextView
                    android:id="@+id/rank"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/countrylabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/countrylabel" />

                <TextView
                    android:id="@+id/country"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/populationlabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/populationlabel" />

                <TextView
                    android:id="@+id/population"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:id="@+id/flag"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#000000"
            android:padding="1dp" />
    </LinearLayout>

    <VideoView
        android:id="@+id/VVExe"
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:layout_marginTop="5dp"
        android:layout_weight="7.9"
        android:gravity="center" />

</LinearLayout>

viewpager_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="10" >

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="wrap_content"
            android:layout_height="0dip"
            android:layout_weight="8.6" />

<LinearLayout
    android:layout_width="fill_parent"
      android:layout_height="0dip"
        android:layout_weight="1.4"
    android:gravity="center"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#696969"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="10" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </LinearLayout>

        <ImageButton
            android:id="@+id/btnprevAB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@drawable/prevsel" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </LinearLayout>

        <ImageButton
            android:id="@+id/btnPlayAB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@drawable/playsel" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </LinearLayout>

        <ImageButton
            android:id="@+id/btnNextAB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="@drawable/nextsel" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </LinearLayout>
    </LinearLayout>

    </LinearLayout>

Dit

Answer 1

I think it is better to use FragmentStatePagerAdapter instead of PagerAdapter. In this scenario you do not need OnPageChangeListener any more and you can use fragment life cycle callback methods like onResume and onPause to play or pause your video.

and how to pause/stop when PageIsChanged. any tutorial or any hits i will be thankful for that.

You can use below links to understand how to use this adapter then you can create your own logic with a help of fragment life cycle method.

Android FragmentStatePagerAdapter Example

FragmentStatePagerAdapter

Glandule

Answer 2

I wrote FrameViedoView which improves performance for playing videos.

It works also for ViewPager.

How to use it?

Add http://bright.github.io/maven-repo/ to your repositories:

repositories {
    maven {
        url "http://bright.github.io/maven-repo/"
    }
}

and then declare a dependency inside a module:

dependencies {
    compile('mateuszklimek.framevideoview:framevideoview:1.1.0@aar')
    //other dependencies
}

In examples you can find how to use it inside a simple Activity.

Read my blog post about FrameVideoView.

Rena

@Dit what do you mean by that? – Rena

examples link is dead – Moolah

Answer 3

1. To detect if ViewPager is scrolling/changing page you just need to attach an OnPageChangeListener to your ViewPager.

2. To play a video from a remote URL you can use the standard MediaController/MediaPlayer. Take a look at this tutorial.

Mn

my source code – Dit

Answer 4

 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

           //do the needful action

            }

            @Override
            public void onPageSelected(int position) {
                System.out.println("selected " + position);
   //do the needful action
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

Overcheck

Answer 5

You will have to access your video from your OnPageChangeListener. Has to do it you have to:

view.setTag("view"+position); in your public Object instantiateItem(ViewGroup container, int position)

And after you can get it back from the OnPageChangeListener:

View viewTag = viewPager.findViewWithTag("view" + viewPager.getCurrentItem());

and then

VideoView videoViewTag = (VideoView)viewTag.findViewById(R.id.videoView);

Renarenado