Відповідно до:
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 повинен підтримувати відеоелемент HTML5. Я не зміг змусити це працювати за допомогою Motorola Droid і не зміг успішно переглянути відео на жодній із прикладних сторінок відео HTML5. Оскільки в даний час немає підтримки QuickTime або Flash, це єдине, що я можу придумати для вбудовування mp4-відео у веб-сторінку. Хтось мав з цим удачу?
Відповіді:
Щойно я експериментував із цим, і з того, що я можу сказати, вам потрібні три речі:
Погляньте демонстраційну версію на цій сторінці: http://broken-links.com/tests/video/
Це працює, AFAIK, у всіх настільних браузерах із підтримкою відео, iPhone та Android.
Ось розмітка:
<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>
І це у мене в JS:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Я протестував це на Samsung Galaxy S, і воно працює нормально.
Відповідь Романа для мене спрацювала добре - або, принаймні, вона дала мені те, чого я очікував. Відкриття відео в рідній програмі телефону точно таке ж, як і те, що робить iPhone.
Ймовірно, варто налаштувати свою точку зору та очікувати, що відео буде відтворюватися на повноекранному екрані у власному додатку та кодувати це. Розчаровує те, що натискання відео недостатньо для того, щоб воно відтворювалось так само, як і iPhone, але, оскільки для його запуску потрібен лише атрибут onclick, це ще не кінець світу.
Моя порада, FWIW, - використовувати зображення плаката та чітко вказати, що воно буде відтворювати відео. На даний момент я працюю над проектом, який робить саме це, і клієнти цим задоволені - а також те, що вони отримують Android-версію веб-програми безкоштовно, звичайно, оскільки контракт був лише на Веб-програма для iPhone.
Тільки для ілюстрації, робочий тег відео для Android знаходиться нижче. Приємно і просто.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
controlsатрибут, подія onclick обходить, коли ви натискаєте паузу (отже, відео фактично призупиняється), але якимось чином, коли ви натискаєте кнопку відтворення, нічого не відбувається - вам потрібно натиснути на відео (а не на фактичній кнопці відтворення), щоб відновити відео.
Тут я розповідаю, як мій друг вирішив проблему відображення відео в HTML на Nexus One:
Я ніколи не міг змусити відео відтворюватися в режимі онлайн. Насправді багато людей в Інтернеті прямо згадують, що вбудоване відтворення відео в HTML підтримується з часів Honeycomb, і ми боролися з Froyo та Gingerbread ... Також для менших телефонів я вважаю, що грати в повноекранний режим дуже природно - інакше не так багато видно . Тож метою було зробити відео відкритим на весь екран. Однак запропоновані рішення в цій темі для нас не працювали - натискання на елемент нічого не викликало. Крім того, було показано відеорегулятори, але жоден плакат не відображався, тому користувальницький досвід був ще дивнішим. Отже, він зробив наступне:
Виставляйте власний код у HTML, щоб його можна було викликати через 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);
}
}
Потім у самому HTML він продовжував невдало змусити відеотег працювати під час відтворення відео. Таким чином, нарешті, він вирішив замінити onclickподію відео, змусивши його виконати справжню гру. Це майже спрацювало для нього - за винятком того, що жоден плакат не відображався. Ось найдивніша частина - він продовжував отримувати ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"кожен раз, коли встановлював posterатрибут тегу. Нарешті він виявив проблему, яка була дуже дивною - виявилося, що він містив sourceпідтег у videoтезі, але ніколи не використовував його. І досить дивно, що саме це спричинило проблему. Тепер подивіться його визначення 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>
Звичайно, вам також потрібно додати визначення функції javascript в голівці сторінки:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
Я усвідомлюю, що це не суто рішення HTML, але це найкраще, що ми змогли зробити для телефону типу Nexus One. Усі кредити за це рішення належать Димитру Златкові Димитрову.
Якщо ви вручну телефонуєте, video.play()це має працювати:
<!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 на html5test.com , говорить мені, що елемент відео підтримується, але жоден із перерахованих відео кодеків ... здається трохи безглуздо підтримувати елемент відео, але немає кодеків ??? якщо з цією тестовою сторінкою щось не так.
однак, я виявив таку ж ситуацію з аудіоелементом: елемент підтримується, але немає аудіоформатів. дивіться тут:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
У мене нічого не працювало, поки я не закодував відео належним чином. Спробуйте цей посібник для правильних налаштувань ручного гальма: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Можливо, вам доведеться закодувати відео спеціально для пристрою, наприклад:
<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>
Є кілька прикладів конфігурацій кодування, які працювали тут:
Це працює для мене:
<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>
Тільки тоді, коли .mp4 знаходиться зверху, а відеофайл не є великим.
Це має працювати, але стежте за роздільною здатністю: Android 2.0 та webkit
Полотно працює прямо з коробки, тоді як Геолокація, здається, взагалі не працює в Емуляторі. Звичайно, мені доводиться надсилати їй фіктивні локації, щоб змусити це працювати, тому я не маю уявлення, як би це було на справжньому телефоні. Я можу сказати те саме з тегом відео. Є проблеми з тим, що він фактично не відтворює відео, АЛЕ я думаю, що це той факт, що відео має більш високу роздільну здатність, ніж те, що може емулятор. Ми дізнаємось більше, коли хтось спробує це на Motorola Droid або іншому пристрої Android наступного покоління
Це може не точно відповісти на ваше запитання, але ми використовуємо формат файлу 3GP або 3GP2. Краще навіть використовувати протокол rtsp, але браузер Android також розпізнає формат файлу 3GP.
Ви можете використовувати щось на зразок
self.location = URL_OF_YOUR_3GP_FILE
щоб увімкнути відеоплеєр. Файл буде передано в потоці, і після закінчення відтворення обробка повертається до браузера.
Для мене це вирішує багато проблем із поточною реалізацією відеотегів на пристроях Android.
Відповідно до: https://stackoverflow.com/a/24403519/365229
Це має працювати з простим 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(); }Вам потрібно активувати програвання () перед повноекранною інструкцією, інакше в браузері Android вона просто перейде в повноекранний режим, але не почне відтворюватися. Тестується з останньою версією браузера Android, Chrome, Safari.
Я протестував його на браузері Android 2.3.3 і 4.4.
Після довгих досліджень на багатьох різних пристроях дотепер я дійшов простого висновку, що MP4набагато менше підтримується, ніж MOVформат. Отже, я використовую MOVформат, який підтримується на всіх пристроях Android та Apple, у всіх браузерах. Я виявив, чи пристрій є мобільним пристроєм або настільним браузером, і встановив SRCвідповідне:
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;
}
Я спробував використовувати .mp4формат для відтворення відео на пристроях Android, але це не вдалося. Тож після деяких спроб і помилок я перетворив відео у .webmформат і наступний код без зайвого javascript або 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>
Він працював на старому пристрої Android (принаймні кілька років станом на 2020 рік).
HTML5 підтримується як на телефонах Google (android), таких як Galaxy S та iPhone. Однак iPhone не підтримує Flash, який підтримують телефони Google.