Element HTML5 na Androida
Według:
Http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 powinien obsługiwać element wideo HTML5. Nie udało mi się uruchomić tego za pomocą Motorola Droid i nie udało mi się pomyślnie wyświetlić wideo na żadnej z przykładowych stron wideo HTML5. Ponieważ obecnie nie ma wsparcia dla QuickTime lub Flash, jest to jedyna inna rzecz, jaką mogę wymyślić do osadzania wideo mp4 na stronie internetowej. Czy ktoś miał jakieś poszczęściło ci się?
14 answers
Właśnie przeprowadziłem z tym eksperymenty i z tego, co mogę powiedzieć, potrzebujesz trzech rzeczy:
- nie wolno używać atrybutu type podczas wywoływania wideo. Musisz ręcznie wywołać wideo.play ()
- wideo musi być zakodowane do pewnych dość ścisłych parametrów; używanie Ustawienia iPhone 'a na hamulcu ręcznym z zaznaczonym przyciskiem "optymalizacja sieci" zwykle robi sztuczkę.
Spójrz na demo na tej stronie: http://broken-links.com/tests/video/
To działa, AFAIK, we wszystkich przeglądarkach desktopowych z obsługą wideo, iPhone i Android.Oto znacznik:
<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>
A ja mam to w JS:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-07 15:49:46
ODPOWIEDŹ Romana zadziałała dobrze dla mnie - a przynajmniej dała mi to, czego oczekiwałem. Otwieranie wideo w natywnej aplikacji telefonu jest dokładnie takie samo, jak robi to iPhone.
Prawdopodobnie warto dostosować swój punkt widzenia i oczekiwać, że wideo będzie odtwarzane na pełnym ekranie we własnej aplikacji, i kodowanie do tego. Frustrujące jest to, że kliknięcie wideo nie wystarczy, aby odtworzyć go w taki sam sposób, jak iPhone, ale widząc, że wystarczy tylko atrybut onclick, aby uruchomić to nie koniec świata.
Moja rada, FWIW, to użyć obrazu plakatu i pokazać, że będzie on odtwarzał wideo. Pracuję w tej chwili nad projektem, który właśnie to robi, i klienci są z niego zadowoleni - a także, że dostają wersję Android aplikacji internetowej za darmo, oczywiście, ponieważ umowa była tylko na iPhone aplikacji internetowej.
Tylko dla ilustracji, działający tag wideo Android znajduje się poniżej. Ładnie i prosto.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-05 15:05:40
Oto jak mój przyjaciel rozwiązał problem wyświetlania filmów w HTML w Nexus One:
Nigdy nie byłem w stanie odtworzyć wideo w linii. Właściwie wiele osób w Internecie wspomina wyraźnie, że odtwarzanie wideo inline w HTML jest obsługiwane od czasu Honeycomb, a my walczyliśmy z Froyo i Gingerbread... Również dla mniejszych telefonów uważam, że granie na pełnym ekranie jest bardzo naturalne - w przeciwnym razie nie tyle jest widoczne. Tak więc celem było, aby film był otwarty na pełnym ekranie. Jednak proponowane rozwiązania w tym wątku nie sprawdziły się u nas-kliknięcie na element niczego nie wywołało. Ponadto pokazano kontrolki wideo, ale nie wyświetlano plakatu, więc wrażenia użytkownika były jeszcze dziwniejsze. Więc to, co zrobił, było następujące:
Wyświetlanie kodu natywnego do HTML, który można wywołać za pomocą javascript:
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
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);
}
}
Potem w samym HTML ciągle zawodził spraw, aby tag wideo działał odtwarzając wideo. Ostatecznie postanowił więc nadpisać onclick Zdarzenie z filmu, zmuszając go do rzeczywistego odtwarzania. To prawie zadziałało dla niego-z wyjątkiem tego, że żaden plakat nie był wyświetlany. Oto najdziwniejsza część-otrzymywał ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" za każdym razem, gdy ustawiał atrybut poster tagu. W końcu znalazł problem, który był bardzo dziwny - okazało się, że trzymał source subtag w znaczniku video, ale nigdy go nie używał. I dość dziwne, że właśnie to powodowało problem. Zobacz jego definicję sekcji video:
<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>
Oczywiście należy również dodać definicję funkcji javascript w nagłówku strony:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
Zdaję sobie sprawę, że nie jest to rozwiązanie czysto HTML, ale jest to najlepsze, co udało nam się zrobić dla telefonu typu Nexus One. Wszystkie kredyty za to rozwiązanie należą do Dimitara Zlatkova Dimitrova.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-23 07:38:24
Jeśli ręcznie wywołasz video.play() powinno działać:
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-15 20:18:45
Wskazując moją przeglądarkę android 2.2 na html5test.com , mówi mi, że element wideo jest obsługiwany, ale żaden z wymienionych kodeków wideo... wydaje się trochę bez sensu wspierać element wideo, ale bez kodeków??? chyba, że coś jest nie tak z tą stroną testową.
Znalazłem jednak taką samą sytuację z elementem audio: element jest obsługiwany, ale nie ma formatów audio. Zobacz też tutaj:
Http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-11 15:51:14
Nic nie działało dla mnie, dopóki nie zakodowałem poprawnie wideo. Wypróbuj ten przewodnik, aby uzyskać prawidłowe ustawienia Hamulca ręcznego: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-30 18:32:52
Może Trzeba zakodować film specjalnie dla urządzenia np:
<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>
Istnieją przykłady konfiguracji kodowania, które działały tutaj:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-14 22:13:07
Spróbuj h. 264 w kontenerze mp4. Odniosłem z nim wiele sukcesów na moim Droid X. używałem zencoder.com do konwersji formatów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-30 12:07:16
To działa dla mnie:
<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>
Tylko wtedy, gdy .mp4 jest na górze, a videofile nie są zbyt duże.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-06 20:08:23
Ma działać, ale patrz na rozdzielczość: Android 2.0 i webkit
Płótno działa od razu po wyjęciu z pudełka, podczas gdy Geolokalizacja wydaje się nie działać w wszystko w emulatorze. Oczywiście, że mam aby wysłać go mock lokalizacje, aby dostać go do pracy, więc nie mam pojęcia co to jak na prawdziwym telefonie. I można powiedzieć to samo z wideo tag. Są z tym problemy nie właściwie odtwarzam ten filmik, ale ja myślę, że to fakt, że film jest a wyższa rozdzielczość niż to, co Emulator może obsłużyć. Będziemy wiedzieć więcej jak ktoś spróbuje to na Motoroli Droid lub inne urządzenie z Androidem nowej generacji
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-10 21:51:08
To może nie odpowiedzieć na twoje pytanie, ale używamy formatu 3GP lub 3GP2. Lepiej nawet używać protokołu rtsp, ale przeglądarka Android rozpoznaje również format pliku 3GP.
Możesz użyć czegoś takiego jak
self.location = URL_OF_YOUR_3GP_FILE
Aby uruchomić odtwarzacz wideo. Plik będzie przesyłany strumieniowo, a po zakończeniu odtwarzania Obsługa zostanie zwrócona do przeglądarki.
Dla mnie to rozwiązuje wiele problemów z bieżącą implementacją tagów wideo na urządzeniach z Androidem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-20 06:21:08
Według: https://stackoverflow.com/a/24403519/365229
To powinno działać, z prostym Javascript:
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(); }Musisz uruchomić play () przed instrukcją pełnoekranową, w przeciwnym razie w przeglądarce Android będzie po prostu przejść na Pełny ekran, ale będzie nie zaczynaj grać. Testowane z najnowszą wersją przeglądarki Android, Chrome, Safari.
Przetestowałem go na Androidzie 2.3.3 i przeglądarce 4.4.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:25:55
Po wielu badaniach, na wielu różnych urządzeniach, do tej pory, doszedłem do prostego wniosku, że MP4 jest znacznie mniej obsługiwany niż format MOV.
Używam formatu MOV, który jest obsługiwany przez wszystkie urządzenia z Androidem i Apple, we wszystkich przeglądarkach.
Wykryłem pogodę urządzenie jest urządzeniem mobilnym lub przeglądarką desktopową i ustawiłem SRC odpowiednio:
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 13:19:41
HTML5 jest obsługiwany zarówno w telefonach Google (android), takich jak Galaxy S, i iPhone. iPhone nie obsługuje jednak Flasha, który obsługuje telefony Google.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-16 07:06:50