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에 추가 합니다. ... ... } ... ... }
- 예제 소스 코드 다운로드