4. CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG STREAM AUDIO VÀ VIDEO
4.3 Giới thiệu về Video playback
4.3.5 Giao thức hỗ trợ HTTP và RTSP
Tạo một đối tượng VideoView được định nghĩa trong file layout :
Tạo đối tượng Uri chứa đường link đến server hỗ trợ streaming
Thiết lập giao diện điều khiển pause, seekto…
Thiết lập đường link với tham số truyền vào là đối tượng Uri vừa tạo :
Uri videoUri =
Uri.parse("http://channelz7.org.mp3.zdn.vn/zv/2d68e363c6fcc829d2faa cbbe139b1fd/5209bd50/2012/06/06/4/0/40a2684713e84fc101ef7ca70279ae3 c.mp4?start=0");
vv = (VideoView) this.findViewById(R.id.VideoView);
vv.setMediaController(new MediaController(this));
vv.setVideoURI(videoUri);
69
Cuối cùng sau khi thiết lập xong ta khởi chạy và trước khi chạy phải chắc chắn rằng add thêm permission cho INTERNET:
Demo
Để đơn giản ta truy cập để xem trực tuyến trên server zing.mp3 Truy cập vào video cần xem bằng chrome :
Hình: 7Zing server in Chrome
Kích download bằng IDM sau đó copy đường link ở URL:
Hình: 8URL in IDM
Và dán vào đối tượng Uri trong eclispe build và nạp qua emulator ta thu được kết quả sau :
vv.start();
70
Hình: 9Kết quả xem Video trên zing server
4.3.5.2 Mediaplayer Network video player
Với lớp MediaPlayer ta có thể customize lại ứng dụng để linh động hơn trong việc điều khiển cũng như thiết kế giao diện cân chỉnh kích thước hiển thị..
Sau đây em xin trình bày một ví dụ cụ thể sử dụng class MediaPlayer.
Code
Tạo main activiti có implement các class và interface để sử dụng các phương thức của chúng :
Trong onCreate() tạo đối tượng surfaceView, đối tượng này là một lớp view chứa toàn bộ những lớp view chồng lên nhau, chúng ta có thể thay đổi định dạng
public class CustomVideoPlayer extends Activity implements OnBufferingUpdateListener,
OnCompletionListener, OnErrorListener, OnInfoListener, OnPreparedListener, OnSeekCompleteListener,
OnVideoSizeChangedListener,
SurfaceHolder.Callback
71
và kích thước và vị trí của nó trên màn hình. SurfaceHolder là đối tượng hiển thị trên cùng nhất mà ta nhìn thấy và tương tác với người dùng.
Tạo đối tượng mediaPlayer và thiết lập các bộ lắng nghe sự kiện
Thiết lập đường dẫn đến server như ví dụ trước đã trình bày vào đối tượng filePath
Tạo thêm các đối tượng sau :statusView để hiện thị thông tin về quá trình nào đang thực hiện, currentDisplay lưu giữ thông tin đang hiển thị ở màn hình, tạo đối tượng điều khiển media.
Sau khi thiết lập xong các đối tượng thì đối tượng surfaceView sẽ đi vào vòng đời của nó, đâu tiên ta override phương thức surfaceCreate()
Tại đây ta sẽ sử dụng phương thức prepareAsync() cho đối tượng media:
Sau khi gọi phương thức trên đối tượng media sẽ bắt đầu load dữ liệu từ internet về khi đầy buffer thì chuyển vào trạng thái prepared và phương thức onPrepare() sẽ được gọi. (tham khảo thêm vòng đời của mediaplayer). Trong phương thức này ta sẽ thực hiện điều chỉnh lại kích thước phân giải cho phù hợp với màn hình hiển thị. Chúng ta không đi sâu vào vấn đề này.
surfaceView = (SurfaceView) this.findViewById(R.id.SurfaceView);
surfaceHolder = surfaceView.getHolder();
surfaceHolder.addCallback(this);
mediaPlayer = new MediaPlayer();
mediaPlayer.setOnCompletionListener(this);
mediaPlayer.setOnErrorListener(this);
mediaPlayer.setOnInfoListener(this);
mediaPlayer.setOnPreparedListener(this);
String filePath =
"http://channelz7.org.mp3.zdn.vn/zv/c8026bfc894c49ed70e41e696519eb9 c/5209bd50/2012/10/07/a/1/a178fd2f3b643435ab28f0049744776b.mp4?star t=0";
statusView.setText("MediaPlayer DataSource Set");
currentDisplay = getWindowManager().getDefaultDisplay();
mediaPlayer.setDisplay(holder);
72
Tiếp theo để hiển thị lên giao diện điều khiển ta cần phải thực hiện các phương thức sau đây cuối cùng hiển thị lên text view trạng thái hiện tại.
Ta cần xem tình trạng của buffered được điền đầy hay chưa thì cần phải override phương thức onBufferingUpdate(). Phương thức này được gọi khi có bất kì sự thay đổi nào của buffer
Cuối cùng ta quan tâm đến sự kiện chạm tay vào màn hình của người sử dụng, khi chạm tay vào thì giao diện điều khiển media sẽ hiện ra và chạm tiếp thì ẩn đi.
Demo
Quan sát các phương thức và các biến trong outline trên màn hình của IDE để có thể hình dung tổng quát được nội dung code
controller.setMediaPlayer(this);
controller.setAnchorView(this.findViewById(R.id.MainView));
controller.setEnabled(true);
controller.show();
mp.start();
statusView.setText("MediaPlayer Started");
statusView.setText("MediaPlayer Buffering: " + bufferedPercent +
"%");
@Override
public boolean onTouchEvent(MotionEvent ev) { if (controller.isShowing()) {
controller.hide();
} else {
controller.show();
}
return false;
}
73 Hình: 10Outline
74
Thực hiện build và nạp lên emulator ta thu được kết quả sau
Hình: 11 Kết quả Streaming
75