Android - Webview tự động play video
android
43
White

Anh Nguyễn viết ngày 23/05/2015

Để play video trên webview thì tất nhiên trình duyệt web của thiết bị android của bạn phải hổ trợ HTML5. Trong bài này tôi xin nói về cách play video trên các thiết bị android mà trình duyệt có hổ trợ HTML5. Vì chỉ là newbie nên tôi chỉ viết bài đơn giản và có gì thiếu sót thì mong các bạn hổ trợ để bài viết tốt hơn.
Tôi xin bắt đầu vào nội dung chính.

  Your browser does not support the video tag.

Sau đó tôi dùng webview để load đoạn mã trên.

        wvVideoTest.loadDataWithBaseURL(null, htmlSource, "text/html", "UTF-8", null); 

Mặc dù trong đoạn mã HMTL trên có thuộc tính autoplay nhưng khi build chạy trên thiết bị android nó vẫn không tự động chạy được mặc dù trên web thì rất tuyệt vời. Vậy hướng giải quyết của chúng ta ra sao ?

Rất đơn giản chúng ta sẽ gọi hàm play video bằng javascript và lưu ý là gọi sau khi webview tải trang xong.

        wvVideoTest.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");

Vì tôi rất... gà javascript nên các bạn cứ đọc vào tham khảo câu lệnh trên nhé ;)

Để chạy được đoạn mã javascript trên thì chúng ta cần phải enable javascript cho webview

        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setPluginState(WebSettings.PluginState.ON); 

Full code như sau:

 
        final WebSettings settings = wvVideoTest.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setPluginState(WebSettings.PluginState.ON);
        
        wvVideoTest.setWebViewClient(new WebViewClient() {
            public void onPageFinished(WebView view, String url) {
                wvVideoTest.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");
            }
        });
        
        String htmlSource = "Your browser does not support the video tag.";
        
        wvVideoTest.loadDataWithBaseURL(null, htmlSource, "text/html", "UTF-8", null); 

Nếu bạn muốn hiển thị thanh tiến trình thì thêm thuộc tính controls vào trong đoạn mã HTML trên nhé.
Chúc bạn thành công.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Anh Nguyễn

2 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
6 4
Xưa nay chúng ta quen với việc code android bằng những dòng code dài lê thê lết thết và nhìn rất khá là rối mắt (đối với ai mới bắt đầu sử dụng, tậ...
Anh Nguyễn viết 3 năm trước
6 4
Bài viết liên quan
White
8 4
Ở bài viết lần trước](), tôi đã nói về "hoàn cảnh" tại sao tôi lại cần sử dụng openssl trên android native, đồng thời cũng đã giới thiệu qua về các...
huydx viết hơn 3 năm trước
8 4
White
7 0
Gradle là gì? Sao lại xử dụng Gradle trong Android? Sử dụng Gradle như thế nào? Đó là một trong rất nhiều câu hỏi mà các Android developer mới làm ...
khoatd92 viết 1 năm trước
7 0
White
13 2
Xin chào các bạn. Chắc hẳn mỗi chúng ta đều đã từng phát triển app sử dụng API của bên thứ 3, và chắc mọi người đều biết là hầu hết các API service...
Hải Nguyễn viết hơn 1 năm trước
13 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!