Android 商品详情视频播放解决方案videoview

 

思路：用viewpage作为载体，fragment做界面，界面里，有播放器，有图片展示；有图片的话就设置图片，有视频的话，就播放视频

1、fragment.xml:

1.1、视频界面：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/tv_blacks">

    <VideoView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

    <LinearLayout
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <cn.jzvd.JZVideoPlayerStandard
            android:id="@+id/jz_video"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <ImageView
        android:id="@+id/img_play"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_centerInParent="true"
        android:alpha="0"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/play_arrow" />
</RelativeLayout>


1.2、图片界面：
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_merchant_logo" />

2、fragment.class :

2.1、视频界面：
package cn.zhongshop.xdz.UI.Fragment;

import android.media.MediaPlayer;
import android.net.Uri;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.VideoView;

import cn.zhongshop.xdz.UI.Activity.ShopGoodActivity;
import cn.zhongshop.xdz.Base.BaseFragment;
import cn.zhongshop.xdz.Base.BasePresenter;
import com.zhongshop.xdz.R;

import cn.zhongshop.xdz.Base.BaseFragment;
import cn.zhongshop.xdz.Base.BasePresenter;
import cn.zhongshop.xdz.UI.Activity.ShopGoodActivity;

/**
 * Created by Administrator on 2018/9/21.
 * <p>
 * 视频播放界面
 */

public class VideoPlayFragment extends BaseFragment {

    private VideoView video_view;
    private ImageView imgPlay;
    private String videoUrl = "";

    @Override
    protected BasePresenter createP() {
        return null;
    }

    @Override
    protected int setview() {
        return R.layout.ac_videoplay;
    }

    @Override
    protected void initview() {

        video_view = (VideoView) findviewById(R.id.video_view);
        imgPlay = (ImageView) findviewById(R.id.img_play);

        video_view.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {

            }
        });
        video_view.setOnInfoListener(new MediaPlayer.OnInfoListener() {
            @Override
            public boolean onInfo(MediaPlayer mp, int what, int extra) {
                return false;
            }
        });
        video_view.setOnErrorListener(new MediaPlayer.OnErrorListener() {
            @Override
            public boolean onError(MediaPlayer mp, int what, int extra) {
                return false;
            }
        });
        video_view.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {

                Log.e("TAG", "Video playback completed");

            }
        });
//        video_view.setOnTouchListener(new View.OnTouchListener() {
//            @Override
//            public boolean onTouch(View v, MotionEvent event) {
//                if (!video_view.isPlaying()) {
//                    video_view.start();
//                }
//                return false;
//            }
//        });

        imgPlay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (video_view.isPlaying()) {
                    imgPlay.animate().alpha(1f).start();
                    video_view.pause();
                } else {
                    imgPlay.animate().alpha(0f).start();
                    video_view.start();
                }
            }
        });
//        videoUrl = "https://vd4.bdstatic.com/mda-je4kzvm6346yx472/sc/mda-je4kzvm6346yx472.mp4?auth_key=1560843287-0-0-29892cec9d4511207f6b8bcc009f530f&bcevod_channel=searchbox_feed&pd=unknown&abtest=all";
        videoUrl = getArguments().getString("videoUrl");
        video_view.setVideoURI(Uri.parse(videoUrl));
        video_view.start();

        ShopGoodActivity.setPageTouchListener(new ShopGoodActivity.pageTouchListener() {
            @Override
            public void onTouchListener() {
                if (video_view.isPlaying()) {
                    video_view.pause();
                }
            }
        });
    }
}


2.2、图片界面：
public class ShopContFragment extends BaseFragment {

    @Override
    protected BasePresenter createP() {
        return null;
    }

    @Override
    protected int setview() {
        return R.layout.activity_image;
    }

    private String imgUrl;
    @Override
    protected void initview() {
        imgUrl = getArguments().getString("imgUrl");
        ImageView image = (ImageView) findviewById(R.id.image);
//        Picasso.with(context).load(imgUrl).into(image);
        Glide.with(context).load(imgUrl).into(image);

        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                localBroadcastUtils.startLocalBroadcast(ShopGoodActivity.INTENT_BROADCAST);
            }
        });
    }
}



3、viewpage主布局xml：
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="360dp">

                    <android.support.v4.view.ViewPager
                        android:id="@+id/myViewPager"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="20dp"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentBottom="true"
                        android:orientation="vertical"
                        android:gravity="right">
                        <TextView
                            android:id="@+id/pageNum"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="0/0"
                            android:textColor="@color/app_FF6600"
                            android:textSize="18dp" />
                        <ImageView
                            android:visibility="gone"
                            android:id="@+id/img_special"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@mipmap/special_store"
                            android:textSize="18dp" />
                    </LinearLayout>
                </RelativeLayout>

4、viewpage主界面.class内：

                         for (int i = 0; i < photos.size(); i++) {
                            Log.e("ss", "photos=" + photos.get(i));
                            if (i == 0 && !TextUtils.isEmpty(data.getVideo())) {
                                VideoPlayFragment videoPlayFragment = new                                         VideoPlayFragment();
                                Bundle bundle1 = new Bundle();
                                bundle1.putString("videoUrl", photos.get(i));
                                videoPlayFragment.setArguments(bundle1);
                                fragmentList.add(videoPlayFragment);
                            } else {
                                ShopContFragment mainFragmentList = new ShopContFragment();
                                Bundle bundle = new Bundle();
                                bundle.putString("imgUrl", photos.get(i));
                                mainFragmentList.setArguments(bundle);
                                fragmentList.add(mainFragmentList);
                            }
                        }
                        myViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentList));
                        myViewPager.setOffscreenPageLimit(fragmentList.size());

                        pageNum = findViewById(R.id.pageNum);
                        pageNum.setText("1/" + fragmentList.size());