Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@daichi_0910(Daichi Mizuno)in弱々エンジニア会

AndroidのlibVLCのMediaPlayerでフェード処理の実現

Last updated at Posted at 2017-06-28

#Androidで動画のフェード処理

##前提　 MediaPlayerで動画の再生を理解していること
通常の動画の再生はこちらを参考にしてください
http://www.programing-style.com/android/android-api/android-surfaceview-video/

##フェードアウト・フェードインの方法
libVLCのMediaPlayerでの動画の再生はSurfaceViewを使用していますが、
SurfaceViewにanimationを付けてもフェード処理はできません。
また、setFormatを使用しても動画の場合はAlphaを付けることはできません。

##フェード処理の実現方法
今回はSurfaceViewの上にViewを乗せます。
そして乗せたViewにAlpha処理を付け加え、フェード処理を実現します。

##注意点
ViewにはAlphaAnimationとsetAlphaのどちらかしか使えません。
両方使おうとすると動画が真っ暗になるか、Alpha処理が動作しませんので、今回はAlphaAnimationのみを使用します。

##VLCでの動画再生
今回はlibvlc2.0.6を使用していますので、まずは以下をbuild.gradleに追加してください。

dependencies {
    compile "de.mrmaffen:vlc-android-sdk:2.0.6"
}

次に動画再生をしましょう。
まずはMainAcitivity

MainActivity.java

import android.content.Context;
import org.videolan.libvlc.MediaPlayer;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.SurfaceView;

import org.videolan.libvlc.LibVLC;
import org.videolan.libvlc.Media;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements MediaPlayer.EventListener {

    private MediaPlayer mediaPlayer;
    private Media media;
    private SurfaceView surfaceView;
    private final Uri uri=Uri.parse("動画ファイルの場所");
    private LibVLC libVLC;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        surfaceView=(SurfaceView)findViewById(R.id.surfaceView);
        mediaPlayer_start();

    }

    @Override
    public void onStop(){
        super.onStop();
        stop_mediaPlayer();
    }

    private void mediaPlayer_start(){
        //libVLCインスタンス作成
        ArrayList<String> args = new ArrayList<>();
        args.add("-vvv");
        libVLC = new LibVLC(getApplicationContext(), args);

        media=new Media(libVLC,uri);

        //MediaPlayerの準備
        mediaPlayer=new MediaPlayer(libVLC);
        mediaPlayer.setMedia(media);
        
        //VLCVoutを取得し、surfaceViewにattach
        mediaPlayer.getVLCVout();
        mediaPlayer.setEventListener(this);
        mediaPlayer.getVLCVout().setVideoView(surfaceView);
        mediaPlayer.getVLCVout().attachViews();

        //再生
        mediaPlayer.play();
    }


    public void stop_mediaPlayer(){
        //インスタンス等の解放
        mediaPlayer.stop();
        mediaPlayer.getVLCVout().detachViews();
        mediaPlayer.release();
        libVLC.release();

    }

    @Override
    public void onEvent(MediaPlayer.Event event) {
        if(event.type==MediaPlayer.Event.PositionChanged){

        }
    }
}

ついでにレイアウトも乗せて置きます。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.daichi.myapplication.MainActivity">

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

これで動画の再生はできると思います。

次にSurfaceViewの上にBackgroundを黒くしたTextView（他のViewでもいいです)を乗せます。
ここでのポイントが注意点にも書いたように、alphaは設定しないでください。
そしてalphaAnimationを追加してください。フェードイン・フェードアウト、
適当に作ってください。(ここではフェードアウトを実行します)
そしたら最後にTextViewにAnimationを組み込むのですが、初めは以下のようにTextViewを透過にしておいてください。

textView.setBackgroundColor(Color.TRANSPARENT);

そしてフェードアウトしたいポイントが来たら、

textView.setBackgroundColor(Color.BLACK);

をして暗くします。

ちなみにフェード処理のポイントですが、onPositionChangedで随時、
動画のPositionを取得してくれるので、それに従ってください。
そして後はstartAnimationを実行すれば完成です。

最後に全てのコードを乗せて置きます。

MainAcitivity

MainActivity.java
import android.content.Context;
import org.videolan.libvlc.MediaPlayer;

import android.graphics.Color;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.SurfaceView;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

import org.videolan.libvlc.LibVLC;
import org.videolan.libvlc.Media;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements MediaPlayer.EventListener {

    private MediaPlayer mediaPlayer;
    private Media media;
    private SurfaceView surfaceView;
    private final Uri uri=Uri.parse("動画ファイルの場所");
    private LibVLC libVLC;

    private TextView textView;
    private boolean flag=true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        surfaceView=(SurfaceView)findViewById(R.id.surfaceView);
        textView=(TextView)findViewById(R.id.textView);
        textView.setBackgroundColor(Color.TRANSPARENT);
        mediaPlayer_start();

    }

    @Override
    public void onStop(){
        super.onStop();
        stop_mediaPlayer();
    }

    private void mediaPlayer_start(){
        //libVLCインスタンス作成
        ArrayList<String> args = new ArrayList<>();
        args.add("-vvv");
        libVLC = new LibVLC(getApplicationContext(), args);

        media=new Media(libVLC,uri);

        //MediaPlayerの準備
        mediaPlayer=new MediaPlayer(libVLC);
        mediaPlayer.setMedia(media);

        //VLCVoutを取得し、surfaceViewにattach
        mediaPlayer.getVLCVout();
        mediaPlayer.setEventListener(this);
        mediaPlayer.getVLCVout().setVideoView(surfaceView);
        mediaPlayer.getVLCVout().attachViews();

        //再生
        mediaPlayer.play();
    }

    public void stop_mediaPlayer(){
        //インスタンス等の解放
        if(mediaPlayer.isPlaying()){
            mediaPlayer.stop();
        }
        mediaPlayer.getVLCVout().detachViews();
        mediaPlayer.release();
        libVLC.release();
    }

    @Override
    public void onEvent(MediaPlayer.Event event) {
        if(event.type==MediaPlayer.Event.PositionChanged){
            float position=mediaPlayer.getPosition();//動画の現在位置の取得

            if(position>0.7f && flag==true){
                //Animationの実行
                Animation animation= AnimationUtils.loadAnimation(this,R.anim.fadeout);
                textView.setBackgroundColor(Color.BLACK);
                textView.startAnimation(animation);
                flag=false;
            }
        }
    }
}

MainAcitivityのレイアウト

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.daichi.myapplication.MainActivity">

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</FrameLayout>

フェードアウトのXML

fadeout.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.1"
    android:toAlpha="1.0"
    android:fillAfter="true"
    android:duration="3000" 
    />

ちなみにフェードインはfadeout.xmlのfromAlphaとtoAlphaを
変えてください。

##最後に
初めて書いたので、わかりづらい部分や読みにくいコードが
あるかもしれませんので、どうぞご指摘ください。

気が向いたらフェード処理できるSurfaceViewクラス作ってみます。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?