Sử dụng IBM Worklight để phát triển ứng dụng lai có thể phát video thông qua HTML5 trên nhiều nền tảng

Các doanh nghiệp ngày nay đang chạy đua để mở rộng khả năng tiếp cận hệ thống của họ lên các thiết bị di động, do đó các ứng dụng lai đang ngày càng tận dụng lợi thế đa nền tảng của HTML5. Tuy nhiên, khả năng của HTML5 giảm đi khi chơi video trên nhiều nền tảng, đặc biệt là trên các ứng dụng lai chạy trên Android. Bài này chỉ ra cách bạn có thể giải quyết các vấn đề này và cho phép chơi video thông bằng cách tận dụng khả năng di động lai của IBM Wotklight.® Worklight. Nội dung của bài này trích một phần từ bài báo kỹ thuật IBM WebSphere Developer.

Bill Paris, Nhà phát triển phần mềm, IBM China

Bill Paris là một nhà tư vấn phát triển về các dịch vụ phần mềm của IBM trong nhóm WebSphere. Ông chuyên phát triển ứng dụng cho thiết bị di động và máy chủ trung gian.



Sreeni Pamidala , Kiến trúc sư CNTT cao cấp, IBM China

Sreeni Pamidala là một kiến trúc sư công nghệ thông tin cao cấp, ông hiện đang làm việc tại trung tâm ISSW Mobile Services, thuộc nhóm AIM Software với vai trò là kiến trúc sư trưởng. Ở đây, ông dành phần lớn thời gian để làm việc với các khách hàng ở tất cả các ngành công nghiệp để phát triển và cung cấp các giải pháp di động sử dụng công nghệ IBM Mobile Foundation tích hợp với cơ sở hạ tầng và hệ thống trung gian doanh nghiệp. Trước khi đảm nhiệm vai trò này, Sreeni đã làm việc với các khách hàng ComSector trong 15 năm nơi ông đưa ra các cam kết thành công bằng cách phát triển và triển khai các trang web phức tạp, mạng lưới các giải pháp cho các nhà cung cấp dịch vụ di động và các di sản nền tảng di động sử dụng các thương hiệu sản phầm phần mềm và phần cứng của IBM và các sản phẩm tích hợp của nhiều nhà cung cấp bên thứ ba để đưa ra các giải pháp tối ưu nhất.



Raghunandan K Harithas, Chuyên viên tư vấn CNTT, IBM China

Raghunandan Harithas là một chuyên gia CNTT ở trụ sở văn phòng IBM Annapolis ở Maryland, Mỹ. Ông đã đảm nhiệm vai trò trưởng nhóm kỹ thuật trong một vài dự án viễn thông sử dụng sản phẩm WebSphere. Hiện tại ông đang làm trong lĩnh vực phát triển ứng dụng di động sử dụng phần mềm IBM Mobile Foundation dựa trên Worklight.



10 06 2013

Giới thiệu

Một ứng dụng di động lai (hybrid) liên kết các tính năng của hệ điều hành gốc với công nghệ web. Thông thường, ứng dụng lai trình bày nội dung trong các trình duyệt web tích hợp sẵn, đây là một phương pháp tăng cường khả năng đa nền tảng bởi vì hầu hết ứng dụng được viết bằng HTML5, đồng thời cũng cho phép truy cập vào các tính năng gốc của thiết bị khi cần thiết. IBM Worklight là một nền cho phép phát triển các ứng dụng lai đa nền tảng, cung cấp cơ chế chuyển đổi giữa web view và native view, đồng thời cung cấp một môi trường phát triển và thực thi giúp đưa các ứng dụng lai đến gần với mục tiêu viết-một-lần-chạy-mọi-nơi.

Việc phát một đoạn Video trong ứng dụng là một lĩnh vực mà các ứng dụng đa nền tảng khó đạt được. Chúng ta mong chờ thẻ <video> trong HTML5 có thể làm được điều đó, nhưng thẻ này không có đủ khả năng như ta mong đợi.

Bài này tập trung vào việc phát triển khả năng phát video trong ứng dụng lai HTML5 đa nền tảng và giải thích cách mà IBM Worklight có thể giúp ta giải quyết vấn đề đó qua việc hỗ trợ khả năng phát video của HTML5 trên một nền tảng cụ thể.


Những thách thức trong việc phát video

Việc phát Video trên máy tính hay trên các thiết bị di động từ lâu đã là một thách thức cho các nhà phát triển bởi vì muốn phát triển các ứng dụng thao tác với video đòi hỏi phải có hiểu biết về các công nghệ và các thuật ngữ phức tạp. Trước khi đi sâu hơn, chúng ta hãy làm quen với một số thuật ngữ.

Video là sự kết hợp giữa những hình ảnh và âm thanh trong một gói hợp nhất. Các tên gọi phổ biến:

  • Một video container gói các file video và âm thanh thành một file hợp nhất. Có nhiều định dạng video container phổ biến như MPEG4, Flash Video, Ogg, WebM, và Audio Video Interleave. Chúng được thể hiện thông qua phần tên mở rộng như mp4, flv, ogv, webm, và avi,....
  • Một video codec nhận viết các thuật toán mã hóa và giải mã video (nén và giải nén). Một trình phát video cần biết sử dụng codec phù hợp nào để giải mã và phát đoạn video đó.
  • Một audio codec cũng tương tự như video codec nhưng nó được dùng để giải mã âm thanh.

Chuyển sang HTML5

Thách thức chính của vấn đề phát video xuất phát từ sự phát triển của cơ chế phát video trong máy tính và các thiết bị di động. Trước khi có HTML5, không có một phương pháp nào chuẩn để phát video trên các trình duyệt, mà hầu hết đều phải dựa vào một plug-in của nhà cung cấp thứ ba như RealPlayer, Apple QuickTime, và Adobe Flash. Khả năng phát video trên HTML5 xuất hiện đã giúp giải quyết được sự phụ thuộc vào các plug-in này, như bạn thấy thậm chí là trang chia sẻ video phổ biến Youtube cũng dùng chuẩn Flash de-facto trên máy tính để phát video. Khi hãng Apple từ chối hỗ trợ Flash và ủng hộ sử dụng HTML5 để phát video trên các thiết bị chạy iOS, thì các trang web đang sử dụng Flash để phát video bỗng trở nên bất khả dụng và các lập trình viên bắt đầu tập trong vào việc thiết kế các trang web để hỗ trợ HTML5 trong việc phát video.

HTML5 đã thêm vào một tag video mới cho phép nhúng trực tiếp nội dung video vào trang web để phát mà không cần dùng thêm plug-in. Liệt kê 1 mô tả một ví dụ của tag video dùng để phát một đoạn video có định dạng mp4 trong cửa sổ trình duyệt. Nó xác định chiều rộng và cao của khung phát video được nhúng trong trình duyệt, thuộc tính autoplay cho phép tự động phát video mà không cần bất kỳ thao tác nào trước, và thuộc tính controls (các controls điều chỉnh bao gồm play, pause, volume) cũng được bật lên. Quan trọng nhất chính là chỉ ra đúng đường dẫn nguồn nơi chứa file video được phát.

Liệt kê 1. Tag video trong HTML5 cho phép nhúng video vào trình duyệt
<video width="320px" height="480px" autoplay="autoplay" controls="controls">
	<source src="dir/video.mp4" type="video/mp4"/>
</video>

Việc sử dụng thẻ video trong HTML5 được khuyến khích. Ban đầu, chỉ có trình duyệt Safari là hỗ trợ video HTML5 ngay khi bản thảo đặc tả ra đời, nhưng giờ thì các trình duyệt hiện đại đều đã hỗ trợ nó. Việc phát video trên Web đang ở giai đoạn quá độ sử dụng Flash plug-in để chuyển sang chuẩn HTML5, mặc dù đặc tả HTML5 vẫn đang trong giai đoạn hoàn thiện, dự kiến là đến năm 2014.

Các thách thức khi phát video trên HTML5

Tiếc là việc các trình duyệt hỗ trợ thẻ video trên HTML5 chỉ là một phần vấn đề cần giải quyết bởi vì để phát được video đòi hỏi nhiều hơn thế. Phải hỗ trợ các định dạng video container, các bộ mã (codec) video và âm thanh, và giao thức để phát video trực tuyến, tất cả đóng vai trò lớn đối với các trang web tương tác trên trình duyệt. Ví dụ, có trình duyệt hỗ trợ các bộ mã H.264 và WebM, cũng có trình duyệt chỉ hỗ trợ một trong hai. HTML5 không chỉ định rõ dùng một bộ mã nào bởi vì nhóm tiêu chuẩn đặc tả đã không đồng ý điều đó, họ dự định việc sử dụng video trong HTML5 phải xem xét đến các vấn đề tương thích với trình duyệt.

Càng thách thức hơn khi phát video trên các thiết bị di động, do tính chất đa dạng của chúng với độ phân giải và vi xử lý khác nhau. Ví dụ, có hàng trăm dòng điện thoại chạy Android mà tất cả đều có nhu cầu chơi video và âm thanh.


Thử nghiệm, khó khăn và giải pháp

Dự án SmarterTVApp của chúng tôi liên quan đến sự phát triển của một ứng dụng lai trên thiết bị di động đa nền tảng với khả năng phát video, và chơi video một cách tự nhiên. Chúng tôi kết hợp môi trường phát triển sử dụng Eclipse với plug-in Worklight Studio 4.2, máy chủ phần cứng chạy Worklight Server trên Red Hat Linux®, và một máy chủ chứa các video định dạng MPEG4 phổ biến. Chúng ta thử nghiệm với các thiết bị di động chạy Android 4.0 Ice Cream Sandwich và Apple iOS 5, chúng lấy video từ máy chủ và phát trực tuyến thông qua giao thức HTTP Level Streaming (HLS).

Mô hình ứng dụng lai ba lớp

Những ứng dụng được phát triển trên nền Worklight sử dụng mô hình đa nền tảng ba lớp như minh họa ở hình 1. Lớp thấp nhất bao gồm các chức năng gốc của hệ điều hành được cung cấp thông qua các thư viện API. Đối với các ứng dụng SmarterTVApp, lớp này bao gồm các API của hệ điều hành Android hay iOS được tính hợp vào ứng dụng.

Hình 1. Mô hình ứng dụng ba lớp
Hình 1. Mô hình ứng dụng ba lớp

Lớp ở giữa gồm các thành phần Worklight và Apache Cordova được cung cấp bởi Worklight làm cầu nối giữa các đoạn mã ứng dụng HTML5 với các tính năng của hệ điều hành. Apache Cordova (trước đây được gọi là PhoneGap) là một framework mã nguồn mở phát triển ứng dụng di động cho phép xây dựng các ứng dụng lai bằng cách cung cấp khả năng truy xuất vào hệ điều hành thông qua JavaScript™. Các thành phần Worklight trong lớp này cung cấp các chức năng ở phía client như giao diện, mã hóa lưu trữ, tin báo, framework tích hợp máy chủ và nhiều tính năng khác nữa.

Lớp trên cùng gồm các thành phần ứng dụng. Trong SmarterTVApp, lớp này bao gồm các đoạn mã ứng dụng như JavaScript, HTML và CSS, ta cũng thêm vào bộ IBM Dojo Toolkit phiên bản 1.7.2, và framework IBM issw.mobile được dùng trong ứng dụng cho tính năng trình diễn và chuyển đổi view-to-view.

Môi trường phát triển

Khi tạo một dự án Worklight trong Eclipse, plug-in Worklight Studio sẽ tạo một cấu trúc thư mục mặc định bao gồm các thư mục con và môi trường runtime cho dự án đó. Hình 2 là cấu trúc thư mục cho SmarterTVApp. Thư mục chung chứa các file JavaScript, HTML và CSS cho môi trường phát triển của tất cả các thiết bị trong đó các thư mục android, ipad và mobilewebapp chứa các file được tối ưu dành riêng cho từng loại thiết bị đó.

Trong thư mục chung, chúng ta cũng thêm vào một thư mục Dojo liên quan (dijit, dojo và dojox) để chứa các file Dojo dùng trong ứng dụng, và thêm một thư mục issw cho các tập tin bao gồm framework ứng dụng issw.mobile.

Hình 2. Các thư mục trong dự án Worklight
Hình 2. Thư mục dự án Worklight

Một ví dụ đơn giản về môi trường phát triển thử nghiệm được minh họa ở Hình 3. Các thiết bị Android và iOS tương tác với một ứng dụng máy chủ chạy trên Worklight Server, sau đó ứng dụng này khởi động tính năng phát video trực tuyến từ máy chủ chứa video đến các thiết bị.

Hình 3. Môi trường phát triển thử nghiệm
Hình 3. Môi trường kiểm thử phát triển

Thực thi khởi động bằng thẻ video của HTML5

Thiết kế ban đầu của chúng tôi sử dụng HTML5 để đạt được mục đích phát video trên nhiều nền tảng, vì vậy chúng tôi thực thi element video với hai element source (nguồn), như trong Liệt kê 2. Trong trường hợp có nhiều element source như thế này thì trình duyệt sẽ chọn định dạng video đầu tiên được hỗ trợ để phát, và chúng tôi hy vọng định dạng MP4 và OGV sẽ được hỗ trợ trên nhiều nền tảng.

Liệt kê 2. Thẻ video của HTML5 xác định đoạn video với nhiều định dạng
<video width="320px" height="480px" autoplay="autoplay" controls="controls">
	<source src="dir/video.mp4" type="video/mp4/">
	<source src="dir/video.webm" type="video/webm/">
</video>

Niềm hy vọng của chúng tôi trong việc sử dụng HTML5 để phát video trên nhiều nền tảng đã sớm tan tành mây khói trong lần kiểm thử mẫu chạy đầu tiên. Sau một vài tinh chỉnh thì chúng tôi đã chạy thành công ứng dụng trên iOS nhưng với Android thì không. Đó chỉ là giai đoạn đầu trong quá trình thử nghiệm và kiểm lỗi.

Hướng đến giải pháp

Điều quan trọng ở đây là cách tiếp cận ứng dụng di động lai cho Android, như đã được thực hiện bởi Cordova, thì được dựa trên lớp Android WebView để hiển thị trang web. Một ứng dụng lai dựa trên Cordova sử dụng một WebView để hiển thị phần nội dung của ứng dụng HTML5. Trong quá trình kiểm tra, ta thấy rằng khi nội dung video trên HTML5 được phát thành công trên trình duyệt của Android thì lại không phát được thông qua đối tượng WebView của ứng dụng lai.

Trong quá trình tìm kiếm thông tin trên Web, có một thông tin đã khẳng định mối lo ngại của chúng tôi: trên những diễn đàn công nghệ, các nhà phát triển cũng đăng tải những khó khăn của vấn đề phát video trên HTML5 WebView trên bản Android 4.0. Theo những chỉ dẫn đã đọc, chúng tôi đã thử với một vài định dạng video, thử thay đổi thông số của tag video, cũng đã thử thay đổi giao diện tĩnh (HTML) và động (JavaScript) của element và các thuộc tính thẻ video -- tất cả mà vẫn không thành công.

Vậy nên chúng ta sẽ thực hiện kế hoạch B: đó là bỏ qua việc phát video đa nền tảng sử dụng thẻ video trên HTML5 và thay vào đó sử dụng chương trình phát video có sẵn của Android. Còn khi thực hiện trên iOS thì ứng dụng có thể phát trực tiếp video trên HTML5 như kế hoạch ban đầu.

Một lợi ích khi phát triển ứng dụng với Worklight là nó cung cấp một cơ chế đơn giản để kết hợp chặt chẽ các trang bản địa vào ứng dụng lai. Tính năng viết mã lai của Worklight cho phép một ứng dụng chuyển đổi giữa web và các trang bản địa, và chia sẻ dữ liệu giữa những trang này. Bằng cách sử dụng tính năng này, ứng dụng lai của chúng ta sẽ có khả năng chuyển đổi sang một trang bản địa sử dụng thư viện Java API của Android để phát video, và sau khi hoàn thành việc phát video, nó sẽ chuyển về mã JavaScript phổ biến trên cả iOS và Android.

Với kinh nghiệm này, chúng ta sẽ thiết lập việc thực hiện một trang bản địa Android sử dụng đối tượng VideoView để phát video, và cuối cùng ta sẽ thành công trong việc phát video trên Android.


Chi tiết giải pháp (soluion)

Solution bao gồm mã Java trên Android và mã JavaScript. Mã JavaScript sử dụng khả năng của Worklight để gọi các mã Java trên Android để phát video.

Mã Java trên Android để phát video

Để thực hiện tính năng phát video của Java, đầu tiên chúng ta tạo một lớp StreamingVideoActivity.java bên trong thư mục Android của dự án, xem Hình 4. Cấu trúc dự án Worklight (tách biệt các file tối ưu đặc biệt cho thiết bị vào các thư mục riêng biệt) đơn giản hóa việc bổ sung các mã gốc Android theo yêu cầu của solution.

Hình 4. Thư mục trong dự án Worklight chứa mã Java gốc trên Android
Hình 4. Thư mục dự án Worklight chứa các mã Java cho Android

Lớp StreamingVideoActivity được thực thi như một phần mở rộng của "hành động" (Activity) Android và phát video sử dụng các lớp VideoView và MediaController. Liệt kê 3 minh họa cho việc thực thi này. Một solution hoàn chỉnh sẽ thực hiện gọi lại để kết thúc việc xử lý video và các sự kiện hoàn thành, sau đó trở về giao diện màn hình web dựa trên Worklight.

Liệt kê 3. Thực hiện lớp StreamingVideoActivity.java
public class StreamingVideoActivity extends Activity {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	
	super.onCreate(savedInstanceState);
	Log.d("StreamingVideoActivity", "Entering onCreate");			

	// Extract the URL from the Intent
	String url = getIntent().getStringExtra("urlParam");
		
	Log.d("StreamingVideoActivity", "About to play URL: url");			
	VideoView videoView = new VideoView(this);
	videoView.setVideoPath(url);
		
	MediaController ctlr = new MediaController(this);
	ctlr.setMediaPlayer(videoView);
	videoView.setMediaController(ctlr);
       
	setContentView(videoView);
	videoView.requestFocus();
	Log.d("StreamingVideoActivity", "Leaving onCreate");			
    }
}

Gọi mã Android từ ứng dụng web

Khi đã hoàn thành những công việc cho dự án Android, tất cả những gì còn lại là tạo một hàm JavaScript sử dụng hàm Worklight WL.NativePage.show để chuyển đổi các "hành động" (Activity) từ web sang Androi gốc. File JavaScript SmarterTVApp.js thực hiện hàm nào được đặt trong thư mục đặc thù của dự án Android, xem Hình 5.

Hình 5. Thư mục dự án Worklight chứa file JavaScript đặc thù
Hình 5. Thư mục dự án Worklight chứa các file JavaScript cho Android

Liệt kê 4 là đoạn mã được trích từ file SmarterTVApp.js chỉ ra cách thực hiện của hàm openNativePage gọi tới hàm Worklight WL.NativePage.show để chạy một hành động StreamingVideoActivity.

Liệt kê 4. Đoạn mã trích từ file SmarterTVApp.js
/**
 * Plays the specified video in an Android native page
 * @param url  The video URL
 */
function openNativePage (url) {
	WL.Logger.debug("Switching to SmarterTVApp.StreamingVideoActivity to play " +url);

	// Create an object to hold the URL.  The field name, urlParam, must match
	// the name used in the native Android Java code for extracting the URL
	var params = {urlParam : url};

	// Show the Android native page
	WL.NativePage.show('com.SmarterTVApp.StreamingVideoActivity', 
		backFromNativePage, params);
}

/**
 * Invoked as a call-back on return from the Android native page
 * @param data
 */
function backFromNativePage(data) {
	WL.Logger.debug("Back from StreamingVideoActivity");
}

Cuối cùng, chúng ta cần có điều kiện để gọi hàm openNavtivePage khi ứng dụng lai chạy trên thiết bị Android, và đây chính là lúc mà môi trường phát triển Worklight Studio một lần nữa phát huy tác dụng. Hơn hẳn việc nhận dạng loại thiết bị và thêm vào các câu lệnh logic JavaScript if-then-else, cấu trúc dự án Worklight xử lý việc này một cách tự động. Trong ứng dụng video của chúng ta, việc phát video được thực hiện trong file StreamingView.js. Bằng cách tạo ra hai phiên bản của file, như trong Hình 6, một chứa trong thư mục chung để khởi tạo việc phát video trên HTML5 và file thứ hai được chứa trong thư mục android nhằm gọi hàm openNativePage trong Worklight để khởi chạy tính năng phát video của Android, Worklight Studio tự động xử lý các phiên bản của file sao cho phù hợp với môi trường runtime.

Hình 6. Thực hiện song song quá trình phát video trực tuyến
Hình 6. Phát video song song

Nhấp vào để xem ảnh lớn

Hình 6. Thực hiện song song quá trình phát video trực tuyến

Hình 6. Phát video song song

Kết luận

Qua bài này, chúng ta thấy rằng việc phát video đa nền tảng có thể khó thực hiện và giải pháp cho vấn đề này cũng yêu cầu sử dụng đến tính năng gốc của thiết bị. Worklight đơn giản hóa quá trình phát triển thông qua việc tận dụng khả năng kết hợp của nó giữa tính năng gốc với nền web.


Lời cảm ơn

Chúng tôi trân trọng cám ơn các đồng nghiệp Anton Aleksandrov, Raanan Avidor, Karl Bishop và Tom Thacher đã có những đóng góp kỹ thuật và hướng dẫn để có được bài viết thành công này.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=933522
ArticleTitle=Sử dụng IBM Worklight để phát triển ứng dụng lai có thể phát video thông qua HTML5 trên nhiều nền tảng
publish-date=06102013