Dựa theo:
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 sẽ hỗ trợ phần tử video HTML5. Tôi không thể làm cho điều này hoạt động bằng Motorola Droid và không thể xem thành công video trên bất kỳ trang ví dụ video HTML5 nào trên mạng. Vì hiện tại không hỗ trợ QuickTime hoặc Flash, đây là điều duy nhất tôi có thể nghĩ đến để nhúng video mp4 vào một trang web. Có ai có bất kỳ may mắn với điều này?
Câu trả lời:
Tôi vừa thực hiện một số thử nghiệm với điều này và từ những gì tôi có thể nói với bạn cần ba điều:
Hãy xem bản demo trên trang này: http://broken-links.com/tests/video/
Điều này hoạt động, AFAIK, trong tất cả các trình duyệt máy tính để bàn hỗ trợ video, iPhone và Android.
Đây là đánh dấu:
<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>Và tôi có cái này trong JS:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);Tôi đã thử nghiệm điều này trên Samsung Galaxy S và nó hoạt động tốt.
Câu trả lời của Roman phù hợp với tôi - hoặc ít nhất, nó mang lại cho tôi những gì tôi đang mong đợi. Mở video trong ứng dụng gốc của điện thoại giống hệt như những gì iPhone làm.
Có lẽ bạn nên điều chỉnh quan điểm của mình và mong muốn video được phát toàn màn hình trong ứng dụng của chính nó và viết mã cho điều đó. Thật khó chịu khi nhấp vào video không đủ để nó phát theo cách giống như iPhone, nhưng vì nó chỉ cần một thuộc tính onclick để khởi chạy video, đó không phải là ngày tận thế.
Lời khuyên của tôi, FWIW, là sử dụng hình ảnh áp phích và làm rõ ràng rằng nó sẽ phát video. Hiện tại, tôi đang thực hiện một dự án thực hiện chính xác điều đó và các khách hàng hài lòng với điều đó - và tất nhiên họ cũng đang nhận được phiên bản Android của ứng dụng web miễn phí vì hợp đồng chỉ dành cho một ứng dụng web iPhone.
Dưới đây là một thẻ video Android đang hoạt động. Đẹp và đơn giản.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>controlsthuộc tính, sự kiện onclick sẽ bị bỏ qua khi bạn nhấn tạm dừng (vì vậy video thực sự bị tạm dừng), nhưng bằng cách nào đó khi bạn nhấp vào phát thì không có gì xảy ra-- bạn phải nhấp vào video (không phải vào nút phát thực tế) để video tiếp tục.
Ở đây tôi kể về cách một người bạn của tôi giải quyết vấn đề hiển thị video bằng HTML trong Nexus One:
Tôi không bao giờ có thể làm cho video phát nội tuyến. Trên thực tế, nhiều người trên internet đề cập rõ ràng rằng phát video nội tuyến trong HTML được hỗ trợ kể từ Honeycomb, và chúng tôi đã chiến đấu với Froyo và Gingerbread ... Ngoài ra đối với điện thoại nhỏ hơn, tôi nghĩ rằng chơi toàn màn hình là rất tự nhiên - nếu không thì không hiển thị nhiều . Vì vậy, mục tiêu là làm cho video mở ở chế độ toàn màn hình. Tuy nhiên, các giải pháp được đề xuất trong chủ đề này không hoạt động với chúng tôi - việc nhấp vào phần tử không được kích hoạt. Hơn nữa, các điều khiển video đã được hiển thị, nhưng không có áp phích nào được hiển thị nên trải nghiệm người dùng thậm chí còn kỳ lạ hơn. Vì vậy, những gì anh ta đã làm là sau:
Hiển thị mã gốc cho HTML để có thể gọi được qua javascript:
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");Bản thân mã, có một chức năng gọi là hoạt động gốc để phát video:
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activiy) {
this.activity = activiy;
}
public void startVideo(String videoAddress){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
activity.startActivity(intent);
}
}Sau đó, trong chính HTML, anh ta tiếp tục không làm cho thẻ video hoạt động khi phát video. Vì vậy, cuối cùng anh ấy đã quyết định ghi đè onclicksự kiện của video, biến nó thành một vở kịch thực sự. Điều này gần như hiệu quả với anh ta - ngoại trừ việc không có áp phích nào được hiển thị. Đây là phần kỳ lạ nhất - anh ta tiếp tục nhận được ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"mỗi khi anh ta đặt posterthuộc tính của thẻ. Cuối cùng, anh ấy phát hiện ra vấn đề, một điều rất kỳ lạ - hóa ra anh ấy đã giữ sourcethẻ phụ trong videothẻ, nhưng không bao giờ sử dụng nó. Và kỳ lạ chính xác là điều này đã gây ra vấn đề. Bây giờ hãy xem định nghĩa của anh ấy về videophần này:
<video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" >
Your browser does not support the video tag.
</video>Tất nhiên, bạn cũng cần thêm định nghĩa của hàm javascript vào đầu trang:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>Tôi nhận thấy đây không hoàn toàn là giải pháp HTML, nhưng là giải pháp tốt nhất mà chúng tôi có thể làm cho loại điện thoại Nexus One. Tất cả các khoản tín dụng cho giải pháp này thuộc về Dimitar Zlatkov Dimitrov.
Nếu bạn gọi theo cách thủ công, video.play()nó sẽ hoạt động:
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
enableVideoClicks();
}
function enableVideoClicks() {
var videos = document.getElementsByTagName('video') || [];
for (var i = 0; i < videos.length; i++) {
// TODO: use attachEvent in IE
videos[i].addEventListener('click', function(videoNode) {
return function() {
videoNode.play();
};
}(videos[i]));
}
}
</script>
</head>
<body onload="init()">
<video src="sample.mp4" width="400" height="300" controls></video>
...
</body>
</html>trỏ trình duyệt android 2.2 của tôi đến html5test.com , cho tôi biết rằng phần tử video được hỗ trợ, nhưng không có codec video nào được liệt kê ... có vẻ hơi vô nghĩa khi hỗ trợ phần tử video nhưng không có codec nào ??? trừ khi có gì đó sai với trang kiểm tra đó.
tuy nhiên, tôi đã tìm thấy tình huống tương tự với phần tử âm thanh: phần tử được hỗ trợ, nhưng không có định dạng âm thanh. xem ở đây:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
Không có gì hiệu quả với tôi cho đến khi tôi mã hóa video đúng cách. Hãy thử hướng dẫn này để biết cài đặt phanh tay chính xác: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Có thể bạn phải mã hóa video cụ thể cho thiết bị, ví dụ:
<video id="movie" width="320" height="240" autobuffer controls>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>Có một số ví dụ về cấu hình mã hóa hoạt động ở đây:
Điều này phù hợp với tôi:
<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>Chỉ khi .mp4 ở trên cùng và tệp video không lớn.
Nó phải hoạt động, nhưng hãy xem độ phân giải: Android 2.0 và webkit
Canvas hoạt động ngay lập tức, trong khi Vị trí địa lý dường như không hoạt động trong Trình mô phỏng. Tất nhiên, tôi phải gửi nó đến các địa điểm giả để nó hoạt động, vì vậy tôi không biết điều này sẽ như thế nào trên một chiếc điện thoại thực tế. Tôi có thể nói điều tương tự với thẻ video. Có vấn đề với việc nó không thực sự phát video, NHƯNG tôi nghĩ rằng thực tế là video có độ phân giải cao hơn những gì Trình giả lập có thể xử lý. Chúng tôi sẽ biết nhiều hơn khi ai đó thử điều này trên Motorola Droid hoặc thiết bị Android thế hệ tiếp theo khác
Điều này có thể không trả lời chính xác câu hỏi của bạn, nhưng chúng tôi đang sử dụng định dạng tệp 3GP hoặc 3GP2. Thậm chí tốt hơn nếu sử dụng giao thức rtsp, nhưng trình duyệt Android cũng sẽ nhận dạng được định dạng tệp 3GP.
Bạn có thể sử dụng một cái gì đó như
self.location = URL_OF_YOUR_3GP_FILEđể kích hoạt trình phát video. Tệp sẽ được phát trực tuyến và sau khi quá trình phát lại kết thúc, quá trình xử lý sẽ được trả lại cho trình duyệt.
Đối với tôi, điều này giải quyết được rất nhiều vấn đề với việc triển khai thẻ video hiện tại trên các thiết bị Android.
Theo: https://stackoverflow.com/a/24403519/365229
Điều này sẽ hoạt động với Javascript đơn giản:
var myVideo = document.getElementById('myVideoTag'); myVideo.play(); if (typeof(myVideo.webkitEnterFullscreen) != "undefined") { // This is for Android Stock. myVideo.webkitEnterFullscreen(); } else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") { // This is for Chrome. myVideo.webkitRequestFullscreen(); } else if (typeof(myVideo.mozRequestFullScreen) != "undefined") { myVideo.mozRequestFullScreen(); }Bạn phải kích hoạt play () trước hướng dẫn toàn màn hình, nếu không trong Trình duyệt Android, nó sẽ chỉ chuyển sang chế độ toàn màn hình nhưng sẽ không bắt đầu phát. Đã thử nghiệm với phiên bản mới nhất của Trình duyệt Android, Chrome, Safari.
Tôi đã thử nghiệm nó trên trình duyệt Android 2.3.3 & 4.4.
Sau nhiều nghiên cứu, trên nhiều thiết bị khác nhau, cho đến nay, tôi đã đi đến kết luận đơn giản rằng định dạng MP4ít được hỗ trợ hơn nhiều MOV. Vì vậy, tôi đang sử dụng MOVđịnh dạng được tất cả các thiết bị Android và Apple hỗ trợ trên tất cả các trình duyệt. Tôi đã phát hiện thời tiết, thiết bị là thiết bị di động hay trình duyệt trên máy tính để bàn và đặt SRCtùy chọn:
if (IsMobile()) {
$('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
$('#vid').attr('src', '/uploads/' + name + '.webm');
}
function IsMobile() {
var isMobile = false; //initiate as false
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
return isMobile;
}Tôi đã thử sử dụng .mp4định dạng này để phát video trên thiết bị Android nhưng điều đó không thành công. Vì vậy, sau một số thử nghiệm và gặp lỗi, tôi đã chuyển đổi video thành .webmđịnh dạng và mã sau mà không cần thêm javascript hoặc JQuery:
<video id="video" class="video" muted loop autoplay>
<source src="../media/some_video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>Nó hoạt động trên thiết bị Android cũ hơn (ít nhất là một vài năm tuổi tính đến năm 2020).
HTML5 được hỗ trợ trên cả điện thoại Google (Android) như Galaxy S và iPhone. Tuy nhiên, iPhone không hỗ trợ Flash mà điện thoại của Google hỗ trợ.