QPlayer [Example]

1. Sample Main Web 및 Sample Player Controller Web 설정

- 웹 서버에 web.zip 파일을 다운로드 합니다.

- 설정할 경로에 web.zip 파일을 다운로드 합니다.

- web.zip 파일을 압축 해제 합니다.

2. Mobile App 설정

Android

- Android Project를 생성합니다.

- qplayer.jar 파일을 다운로드 합니다.

- qplayer.jar 파일을 프로젝트에 등록 합니다.

- 아래의 단계를 수행하세요.

■ 1단계

- AndroidManifest.xml 설정

<?xml version="1.0" encoding="utf-8"?>
    ...
    ...
    
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.PREVENT_POWER_KEY" />
    
    ...
    ...
        <activity
    	    
            android:hardwareAccelerated="true"
            android:configChanges="orientation|screenSize"            
    	    
            android:theme="@android:style/Theme.NoTitleBar"
            android:name="qubitech.qplayersample.MainActivity"
            android:label="@string/app_name" >
    ...
    ...
        </activity>
    ...
    ...

■ 2단계

- Main Web 객체 생성

- 본 예제에서는 Main Web의 Scroll Event를 전달받기 위해 Web View를 상속받은 SampleWebView 클래스를 제작하여 이용하였습니다. Main Web은 WebView의 파생 클래스라면 클래스 명이 다르더라도 무관함을 알려드립니다.

- activity_main.xml

...
...

<qubitech.qplayersample.SampleWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF00" />

...
...

■ 3단계

- qplyaer 기본 설정 및 MainWeb 설정

package qubitech.qplayersample;

...
...

import qubitech.qplayer.*;

@SuppressLint("SetJavaScriptEnabled") public class MainActivity extends Activity {


    SampleWebView webView; //WebView 객체
    qPlayerLayout player; //qplayer 객체

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

        webView = (SampleWebView)this.findViewById(R.id.webView); //WebView 객체 생성
        player = new qPlayerLayout(this);//Player 객체 생성
	// 플레이어 설정
        player.setMainWebView(webView); // Main Web 설정
        player.setControlWebUrl("http://www.example.com/qplayer.html"); // 플레이어 컨트롤러 웹설정
        player.setAppScheme("apps"); // 컨트롤러와 플레이어간의 통신에 필요한 스키마 설정


	/*
 	 * WebView 설정
	 * WebView는 지정된 형식이 없으며 현재 보여지는 코드는 샘플 코드입니다. 
	 * WebView와 Sample로 제공되는 웹 관련소스는 앱과 통신하는 부분을 제외한 모든 코드는 자유롭게 수정하여 사용 할 수 있습니다.
	 * 앱과 통신부분을 수정 할 경우 시스템 장애가 발생될 수 있음을 알려드립니다.
	 */
        webView.loadUrl("http://www.example.com/sample.html");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setOnScrollListener(new SampleWebView.OnScrollListener(){

			@Override
			public void OnScrollChanged(int l, int t, int oldl, int oldt) {
				player.setWebScroll(l, t, oldl, oldt); // WebView의 Scroll 이벤트를 전달 받아 현재 Scroll되는 값을 전달
			}
			
        });
        
        webView.setWebChromeClient(new WebChromeClient(){
        	
        });
        webView.setWebViewClient(new WebViewClient(){
        	@Override
        	public boolean shouldOverrideUrlLoading(WebView view, String url) {
        		try {
        			Uri uri = Uri.parse(url);
        			
				//MainWeb이 페이지 이동할때  Scheme를 구분하여 데이터 통신을 진행 합니다.
        			if (uri.getScheme().equals("apps")) {
        				if (uri.getHost().equals("playVideo")) {
        					
        					player.setPlayerVideo(uri.getQuery()); //Video Property를 설정 합니다. 해당 설정에 장애가 없으면 재생이 진행 됩니다.
        					if( getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
        						player.setFullVideo(true);
        					}
        					
					} else if (uri.getHost().equals("setupVideo")) {
						//Player Property를 설정합니다.
						//Player Property는 호출 될때마다 덮어쓰기되며 Video Property가 설정될때 가장 최근에 전달 받은 Property로 적용 됩니다.
        					player.setPlayerProperty(uri.getQuery());
        				} else if (uri.getHost().equals("stopVideo")) {
        					player.setPauseVideo(); //Player를 일시정지 합니다.
        				} else if (uri.getHost().equals("closeVideo")) {
        					player.setCloseVideo(); //Player를 닫습니다.
        				} else if (uri.getHost().equals("playFullVideo")) {
						//System Orientation을 확인하여 전체화면으로 설정 합니다.
						//신규 재생 처리 됩니다.
        					player.setPlayerVideo(uri.getQuery()); /Video Property를 설정 합니다.
        					if( getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
        						player.setFullVideo(true);
        					}else{
        						player.setFullVideo(false);
        					}
        				} else if (uri.getHost().equals("playZoomVideo")) {
						//Zoom 화면으로 설정 합니다.
						//신규 재생 처리 됩니다.
        					player.setPlayerVideo(uri.getQuery());
        					player.setZoomVideo();
        				}
        				return true;
        			}

        			view.loadUrl(url);
        			return true;
        		} catch (Exception e) {
        			return true;
        		}
        	}
        	@Override
        	public void onPageFinished(WebView view, String url) {
        		
        		webView.loadUrl("javascript:setDevice('android')");
        		
        	}
        });
        this.addContentView(player, new LayoutParams(-1,-1)); // 생성한 Player를 Activity Layout에 추가 합니다.

	...
	...
        
    }
    
    ...
    ...
}

- 예제 소스 코드 다운로드