Göre:
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0, HTML5 video öğesini desteklemelidir. Bunu bir Motorola Droid kullanarak çalıştırmayı başaramadım ve oradaki HTML5 video örnek sayfalarının hiçbirinde bir videoyu başarılı bir şekilde izleyemedim. Şu anda QuickTime veya Flash desteği olmadığından, bu, bir web sayfasına mp4 video yerleştirmek için düşünebildiğim tek şey. Kimsenin bu konuda şansı oldu mu?
Yanıtlar:
Bununla ilgili biraz deney yaptım ve söyleyebileceğim üç şeye ihtiyacınız var:
Bu sayfadaki demoya bir göz atın: http://broken-links.com/tests/video/
Bu, tüm video özellikli masaüstü tarayıcılarda, iPhone ve Android'de çalışır, AFAIK.
İşaretleme şu şekildedir:
<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>
Ve JS'de bu var:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Bunu bir Samsung Galaxy S'de test ettim ve iyi çalışıyor.
Roman'ın cevabı benim için iyi çalıştı - ya da en azından bana beklediğimi verdi. Videoyu telefonun yerel uygulamasında açmak, iPhone'un yaptığı ile tamamen aynıdır.
Muhtemelen bakış açınızı ayarlamaya değer ve videonun kendi uygulamasında tam ekran oynatılmasını ve bunun için kodlanmasını bekleyin. Videoyu tıklamanın iPhone'la aynı şekilde oynatmak için yeterli olmaması sinir bozucu, ancak başlatmak için yalnızca bir onclick özelliği gerektirdiğinden, dünyanın sonu değil.
Tavsiyem, FWIW, bir poster görüntüsü kullanmak ve videoyu oynatacağını açıkça belirtmektir. Şu anda tam olarak bunu yapan bir proje üzerinde çalışıyorum ve müşteriler bundan memnun - ve ayrıca bir web uygulamasının Android sürümünü ücretsiz olarak alıyorlar, çünkü sözleşme sadece bir iPhone web uygulaması.
Sadece örnek olarak, çalışan bir Android video etiketi aşağıdadır. Güzel ve basit.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
controlsözniteliği kullanırsanız, duraklat düğmesine bastığınızda onclick olayı atlanır (böylece video gerçekten duraklatılır), ancak bir şekilde oynat'ı tıkladığınızda hiçbir şey olmaz - videoyu devam ettirmek için videoyu (gerçek oynatma düğmesini değil) tıklamanız gerekir.
Burada, bir arkadaşımın videoları Nexus One'da HTML olarak görüntüleme sorununu nasıl çözdüğünü ekliyorum:
Videoyu hiçbir zaman satır içinde oynatamadım. Aslında internetteki pek çok kişi, HTML'de satır içi video oynatmanın Honeycomb'dan beri desteklendiğinden açıkça bahsediyor ve biz Froyo ve Gingerbread ile kavga ediyorduk ... Ayrıca daha küçük telefonlar için tam ekran oynamanın çok doğal olduğunu düşünüyorum - aksi takdirde pek görünür değil . Yani amaç, videoyu tam ekran yapmaktı. Ancak, bu konudaki önerilen çözümler bizim için işe yaramadı - öğeye tıklamak hiçbir şeyi tetiklemedi. Ayrıca video kontrolleri gösterildi, ancak hiçbir poster gösterilmedi, bu nedenle kullanıcı deneyimi daha da tuhaftı. Yani yaptığı şey şuydu:
Yerel kodu, javascript aracılığıyla çağrılabilir olması için HTML'ye gösterin:
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
Kodun kendisi, videoyu oynatmak için yerel etkinlik olarak adlandırılan bir işleve sahipti:
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);
}
}
Sonra HTML'nin kendisinde, video etiketinin videoyu oynatırken çalışmasını sağlamada başarısız olmaya devam etti. Böylece, sonunda onclickvideodaki olayın üzerine yazmaya karar verdi ve gerçek oynatımı yaptı. Bu neredeyse onun için çalıştı - hiçbir poster sergilenmemesi dışında. İşte en garip kısım geliyor - etiketin niteliğini ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"her belirlediğinde almaya devam etti poster. Sonunda çok garip olan sorunu buldu source- alt videoetiketi etikette tuttuğu ancak hiç kullanmadığı ortaya çıktı. Ve yeterince tuhaf, tam olarak bu soruna neden oluyordu. Şimdi videobölüm tanımına bakın:
<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>
Elbette javascript işlevinin tanımını sayfanın başına da eklemeniz gerekir:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
Bunun tamamen HTML çözümü olmadığının farkındayım, ancak Nexus One tipi telefon için yapabildiğimizin en iyisi bu. Bu çözüm için tüm krediler Dimitar Zlatkov Dimitrov'a gidiyor.
Manuel olarak ararsanız video.play()çalışmalıdır:
<!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>
android 2.2 tarayıcımı html5test.com'a yönlendirdiğimde , video öğesinin desteklendiğini, ancak listelenen video kodeklerinden hiçbirinin ... video öğesini desteklemek için biraz anlamsız göründüğünü, ancak kodek olmadığını söylüyor ??? o test sayfasında bir sorun yoksa.
ancak, ses öğesinde de aynı tür bir durum buldum: öğe destekleniyor, ancak ses formatı yok. buraya bakın:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
Videoyu doğru şekilde kodlayana kadar hiçbir şey benim için işe yaramadı. Doğru el freni ayarları için bu kılavuzu deneyin: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Belki de videoyu cihaz için özel olarak kodlamanız gerekir, örneğin:
<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>
Burada çalışan bazı kodlama yapılandırmaları örnekleri vardır:
Bu benim için çalışıyor:
<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>
Yalnızca .mp4 üstte olduğunda ve video dosyası büyük olmadığında.
Çalışması gerekiyordu, ancak çözünürlüğü izleyin: Android 2.0 ve webkit
Tuval, kutudan çıkar çıkmaz çalışır, Coğrafi Konum ise Emülatörde hiç çalışmıyor gibi görünüyor. Elbette, işe yaraması için sahte konumlar göndermem gerekiyor, bu yüzden gerçek bir telefonda bunun nasıl bir şey olacağı hakkında hiçbir fikrim yok. Video etiketiyle aynı şeyi söyleyebilirim. Aslında videoyu oynatmama ile ilgili sorunlar var, ANCAK videonun Emülatörün kaldırabileceğinden daha yüksek bir çözünürlük olduğunu düşünüyorum. Birisi bunu bir Motorola Droid veya başka bir yeni nesil Android cihazda denediğinde daha fazlasını öğreneceğiz
Bu, sorunuzu tam olarak yanıtlamayabilir, ancak 3GP veya 3GP2 dosya biçimini kullanıyoruz. Rtsp protokolünü kullanmak daha iyidir, ancak Android tarayıcısı 3GP dosya formatını da tanıyacaktır.
Gibi bir şey kullanabilirsin
self.location = URL_OF_YOUR_3GP_FILE
Video oynatıcıyı tetiklemek için. Dosya akışa alınacak ve oynatma bittikten sonra işleme tarayıcıya geri dönülecektir.
Benim için bu, android cihazlarda mevcut video etiketi uygulamasıyla ilgili birçok sorunu çözüyor.
Göre: https://stackoverflow.com/a/24403519/365229
Bu, düz Javascript ile çalışmalıdır:
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(); }Tam ekran talimatından önce oynatmayı () tetiklemelisiniz, aksi takdirde Android Tarayıcısında sadece tam ekrana geçecek ancak oynamaya başlamayacaktır. Android Tarayıcısı, Chrome, Safari'nin en son sürümü ile test edilmiştir.
Android 2.3.3 ve 4.4 tarayıcısında test ettim.
Bugüne kadar birçok farklı cihazda yapılan çok araştırmadan sonra, formattan MP4çok daha az desteklenen basit sonuca ulaştım MOV. Bu yüzden, MOVtüm tarayıcılarda tüm Android ve Apple cihazların desteklediği formatı kullanıyorum . Cihazın bir mobil cihaz veya bir masaüstü tarayıcısı olduğu hava durumunu tespit ettim ve SRCbuna göre ayarladım :
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;
}
.mp4Android cihazlarda video oynatmak için formatı kullanmayı denedim ama bu pek iyi gitmedi. Bu yüzden, biraz deneme yanılmadan sonra, videoyu .webmformata ve aşağıdaki kodu fazladan javascript veya JQuery olmadan dönüştürdüm :
<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>
Daha eski bir Android cihazda çalıştı (2020 itibariyle en az birkaç yaşında).
HTML5, Galaxy S ve iPhone gibi hem Google (android) telefonlarda desteklenir. Ancak iPhone, Google telefonlarının desteklediği Flash'ı desteklemez.