Elemen <video> HTML5 di Android

90

Berdasarkan:

http://developer.android.com/sdk/android-2.0-highlights.html

Android 2.0 harus mendukung elemen video HTML5. Saya belum bisa membuat ini bekerja menggunakan Motorola Droid, dan belum berhasil melihat video di salah satu halaman contoh video HTML5 di luar sana. Karena saat ini tidak ada dukungan untuk QuickTime atau Flash, ini adalah satu-satunya hal yang dapat saya pikirkan untuk menyematkan video mp4 di halaman web. Adakah yang beruntung dengan ini?

android  video  mobile  html 
— jmans
sumber
2
Saya juga memiliki Droid, dan belum bisa memutar video html5. Bahkan situs "video untuk semua orang" tidak berfungsi.
— haxney
"video untuk semua orang" dialihkan ke beberapa halaman depan konyol untuk saya - saya bahkan tidak bisa mencoba untuk melihat tetapi satu demo di halaman itu!
— jmans
Tempatkan video dalam sistem file internal / eksternal dan akses. Contoh: - <video kontrol = 'kontrol'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
— Ravikiran

Jawaban:

78

Saya baru saja melakukan beberapa eksperimen dengan ini, dan dari apa yang dapat saya katakan kepada Anda membutuhkan tiga hal:

  1. Anda tidak boleh menggunakan atribut type saat memanggil video.
  2. Anda harus memanggil video.play () secara manual
  3. Video harus dienkode ke beberapa parameter yang cukup ketat; menggunakan pengaturan iPhone di Handbrake dengan tombol 'Web Optimized' yang dicentang biasanya berhasil.

Lihat demo di halaman ini: http://broken-links.com/tests/video/

Ini berfungsi, AFAIK, di semua browser desktop yang mendukung video, iPhone dan Android.

Inilah markupnya:

<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>

Dan saya memiliki ini di JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

Saya menguji ini pada Samsung Galaxy S dan berfungsi dengan baik.

— berhenti hijau
sumber
1
Demo tampaknya tidak berfungsi di Nexus One saya (tidak ada yang terjadi saat saya mengetuk "Putar")
— itsadok
1
BTW tautan yang Anda berikan tidak berfungsi pada 2.3.3 Nexus One, pesan: video ini tidak dapat diputar
— Panthro
@RafaelRoman Saya telah menyertakan dan menjawab, yang semoga akan berfungsi di Nexus One (setidaknya itu berhasil untuk saya): stackoverflow.com/a/8952025/1108032
— Boris Strandjev
Saya tidak bisa mendapatkan ini bekerja pada perangkat tablet 4.0.4 saya. Saya pikir asli adalah cara untuk pergi
— Harry
1
Tidak berfungsi di Android 5.x, video berwarna hitam hingga pemutaran diklik
— FiringSquadWitness
9

Jawaban Roman bekerja dengan baik untuk saya - atau setidaknya, itu memberi saya apa yang saya harapkan. Membuka video di aplikasi asli ponsel sama persis dengan yang dilakukan iPhone.

Mungkin ada baiknya menyesuaikan sudut pandang Anda dan mengharapkan video diputar layar penuh dalam aplikasinya sendiri, dan pengkodean untuk itu. Sangat mengesalkan bahwa mengklik video tidak cukup untuk membuatnya diputar dengan cara yang sama seperti iPhone, tetapi mengingat hanya membutuhkan atribut onclick untuk meluncurkannya, ini bukanlah akhir dari dunia.

Saran saya, FWIW, gunakan gambar poster, dan jelaskan bahwa itu akan memutar video. Saat ini saya sedang mengerjakan proyek yang melakukan hal itu, dan klien senang dengan itu - dan mereka juga mendapatkan aplikasi web versi Android secara gratis, tentu saja, karena kontraknya hanya untuk satu Aplikasi web iPhone.

Hanya untuk ilustrasi, tag video Android yang berfungsi ada di bawah. Bagus dan sederhana.

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
— Gudang Tidak Teratur
sumber
ada masalah aneh dengan ini di browser desktop - di chrome dan firefox, jika Anda menggunakan controlsatribut, peristiwa onclick dilewati saat Anda menekan jeda (sehingga video benar-benar dijeda), tetapi entah bagaimana saat Anda mengeklik putar tidak ada yang terjadi-- Anda harus mengklik di video (bukan tombol putar sebenarnya) untuk melanjutkan video.
— Kip
Ini bekerja. Saya dapat memutar video h264 di Android. File tersebut memiliki akhiran mp4.
— neoneye
8

Di sini saya menyertakan bagaimana teman saya memecahkan masalah menampilkan video dalam HTML di Nexus One:

Saya tidak pernah bisa memutar video sebaris. Sebenarnya banyak orang di internet menyebutkan secara eksplisit bahwa pemutaran video inline dalam HTML didukung sejak Honeycomb, dan kami berkelahi dengan Froyo dan Gingerbread ... Juga untuk ponsel yang lebih kecil menurut saya bermain layar penuh sangat alami - jika tidak, tidak banyak yang terlihat . Jadi tujuannya adalah membuat video terbuka dalam layar penuh. Namun, solusi yang diusulkan di utas ini tidak berhasil untuk kami - mengklik elemen tersebut tidak memicu apa pun. Selanjutnya kontrol video ditampilkan, tetapi tidak ada poster yang ditampilkan sehingga pengalaman pengguna menjadi lebih aneh. Jadi yang dia lakukan adalah sebagai berikut:

Tampilkan kode asli ke HTML agar dapat dipanggil melalui javascript:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

Kode itu sendiri, memiliki fungsi yang memanggil aktivitas asli untuk memutar 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);
    }
}

Kemudian di HTML itu sendiri dia terus gagal membuat tag video berfungsi memutar video. Maka, akhirnya ia memutuskan untuk menimpa onclickacara video tersebut, membuatnya melakukan pemutaran yang sebenarnya. Ini hampir berhasil baginya - kecuali tidak ada poster yang ditampilkan. Inilah bagian yang paling aneh - dia terus menerima ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"setiap kali dia mengatur posteratribut tag. Akhirnya dia menemukan masalah, yang sangat aneh - ternyata dia telah menyimpan sourcesub tag di videotag, tetapi tidak pernah menggunakannya. Dan cukup aneh tepatnya inilah yang menyebabkan masalah. Sekarang lihat definisinya tentang videobagian tersebut:

<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>

Tentu Anda juga perlu menambahkan definisi dari fungsi javascript di head halaman:

<script>
  function playVideo(video){
    window.JSInterface.startVideo(video);
  }
</script>

Saya menyadari ini bukan solusi HTML murni, tetapi yang terbaik yang dapat kami lakukan untuk ponsel jenis Nexus One. Semua kredit untuk solusi ini diberikan kepada Dimitar Zlatkov Dimitrov.

— Boris Strandjev
sumber
Saya harus menambahkan fungsi javascript playVideo (videoName) dengan mengacu pada JSInterface agar ini berfungsi - mungkin tidak terlihat oleh orang yang belum pernah menggunakan teknik ini sebelumnya. Saya juga lebih suka membangun jalur lengkap dengan getExternalDirectory () di fungsi startVideo dengan hanya nama file yang diteruskan dari Javascript. Bekerja untuk saya, kecuali gambar poster menghilang saat aktivitas video ditutup dan WebView kembali fokus (WebView saya disematkan di ViewPager). Terima kasih.
— alan-p
Terima kasih atas komentarnya Saya telah menambahkan skrip panggilan javascript, iklan juga sepenuhnya setuju dengan komentar konstruksi jalur video, namun saya menganggap ini adalah sesuatu yang dapat diperbaiki semua orang untuk kebutuhannya,
— Boris Strandjev
Saya juga mengalami kesalahan "Nilai kosong atau kosong untuk host header". Itu adalah tag sumber yang tidak digunakan. Tag sumber ini sebenarnya digunakan oleh aplikasi ios (aplikasi phonegap), jadi sekarang saya memasukkan tag sumber hanya di ios dan berfungsi dengan baik. terima kasih telah membantu mengatasi masalah aneh ini.
— Guillaume Gendre
5

Jika Anda memanggilnya secara manual video.play()seharusnya berfungsi:

<!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>
— Roman Nurik
sumber
2
Ini membawa saya ke ikon film yang dapat saya klik untuk melihat MP4 di aplikasi video, tetapi tetap tidak memberi saya video sebaris.
— jmans
Video sebaris didukung mulai Android 3.1.
— Roman Nurik
Adakah yang bisa memastikan bahwa ini berfungsi pada perangkat + sarang lebah? Saya tidak bisa membuatnya berfungsi di 3.2. Saya bisa mendengar suaranya, dan tidak melihat video apa pun.
— dongshengcn
4

mengarahkan browser android 2.2 saya ke html5test.com , memberi tahu saya bahwa elemen video didukung, tetapi tidak ada codec video yang terdaftar ... tampaknya sedikit tidak berguna untuk mendukung elemen video tetapi tidak ada codec ??? kecuali ada yang salah dengan halaman pengujian itu.

Namun, saya menemukan situasi yang sama dengan elemen audio: elemen didukung, tetapi tidak ada format audio. Lihat disini:

http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

— Anders Sundnes Løvlie
sumber
sama untuk saya dengan html5test.com di SGS 2.1update1. Apakah Anda sudah menemukan cara untuk menyematkan video? Ketika saya membuka situs pengujian broken-links.com/tests/video dan mengklik ikon putar, video diputar tetapi tidak disematkan (seperti pada desktop / Firefox) tetapi terbuka di pemutar media.
— Mathias Conradt
Sama di sini di LG Optimus Black saya ... tetapi demo pada tautan rusak berfungsi. Saya akan mencoba untuk menyandikan dengan rem tangan.
— Dermaga
4

Tidak ada yang berhasil untuk saya sampai saya menyandikan video dengan benar. Coba panduan ini untuk pengaturan rem tangan yang benar: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

— Tim Scollick
sumber
Memperbaiki masalah untuk saya juga. Tetapi mpeg4 tidak berfungsi untuk browser lain, jadi saya membuat 2 lapisan video. Pertama mpeg4 lalu h264: <video width = "480" height = "386" autoplay loop membungkam playinginline> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 untuk android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 untuk yang lainnya -> <img alt = "" src = "assets / chat_letter.png"> <! - gambar sebagai fallback untuk IE8 -> </video>
— yodalr
1

Mungkin Anda harus menyandikan video khusus untuk perangkat tersebut misalnya:

<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>

Ada beberapa contoh konfigurasi encoding yang berfungsi di sini:

https://supportforums.motorola.com

— ad rees
sumber
1

Coba h.264 dalam wadah mp4. Saya telah banyak berhasil dengannya di Droid X saya. Saya telah menggunakan zencoder.com untuk konversi format.

— Mike
sumber
1

Ini bekerja untuk saya:

<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>

Hanya jika .mp4 di atas dan file video tidak terlalu besar.

— DUNIA
sumber
0

Ini seharusnya berfungsi, tetapi perhatikan resolusinya: Android 2.0 dan webkit

Canvas berfungsi langsung di luar kotak, sementara Geolocation tampaknya tidak berfungsi sama sekali di Emulator. Tentu saja, saya harus mengirimkannya ke lokasi palsu agar berfungsi, jadi saya tidak tahu seperti apa ini di ponsel yang sebenarnya. Saya dapat mengatakan hal yang sama dengan tag video. Ada masalah dengan tidak benar-benar memutar video, TAPI menurut saya itu adalah fakta bahwa video memiliki resolusi yang lebih tinggi daripada yang dapat ditangani oleh Emulator. Kami akan tahu lebih banyak setelah seseorang mencoba ini di Motorola Droid atau perangkat Android generasi berikutnya

— jesup
sumber
Saya akan mencoba mengotak-atik resolusi, tetapi saya menggunakan perangkat yang sebenarnya, dan aliran video (webcam) cukup rendah.
— jmans
0

Ini mungkin tidak menjawab pertanyaan Anda secara tepat, tetapi kami menggunakan format file 3GP atau 3GP2. Lebih baik walaupun menggunakan protokol rtsp, tapi browser Android juga akan mengenali format file 3GP.

Anda bisa menggunakan sesuatu seperti

self.location = URL_OF_YOUR_3GP_FILE

untuk memicu pemutar video. File akan dialirkan dan setelah pemutaran berakhir, penanganan dikembalikan ke browser.

Bagi saya, ini memecahkan banyak masalah dengan penerapan tag video saat ini di perangkat android.

— raksasa
sumber
Hai, saya mencoba yang ini menggunakan Android WebView, tetapi tidak berhasil, apakah ada pengaturan lain yang harus saya lakukan? Saya menggunakan kode di tautan ini .
— Kris
Tidak, saya tidak tahu cara lain untuk mencapai ini.
— leviathan
0

Menurut: https://stackoverflow.com/a/24403519/365229

Ini seharusnya berfungsi, dengan Javascript biasa:

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();
}

Anda harus memicu play () sebelum instruksi layar penuh, jika tidak di Browser Android itu hanya akan menjadi layar penuh tetapi tidak akan mulai bermain. Diuji dengan versi terbaru Browser Android, Chrome, Safari.

Saya telah mengujinya di browser Android 2.3.3 & 4.4.

— Behrouz.M
sumber
0

Setelah banyak penelitian, di banyak perangkat yang berbeda, hingga sekarang, saya telah mencapai kesimpulan sederhana yang MP4kurang didukung daripada MOVformat. Jadi, saya menggunakan MOVformat, yang didukung oleh semua perangkat Android dan Apple, di semua browser. Saya telah mendeteksi cuaca, perangkat tersebut adalah perangkat seluler atau browser desktop, dan menyetelnya SRCsesuai:

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;
}
— Koby Douek
sumber
0

Saya mencoba menggunakan .mp4format tersebut untuk memutar video di perangkat Android tetapi tidak berhasil. Jadi setelah beberapa trial and error, saya mengonversi video ke dalam .webmformat dan kode berikut tanpa tambahan javascript atau 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>

Ini berfungsi pada perangkat Android yang lebih lama (setidaknya beberapa tahun pada tahun 2020).

— Kris Stern
sumber
-4

HTML5 didukung di kedua ponsel Google (android) seperti Galaxy S, dan iPhone. Namun iPhone tidak mendukung Flash, yang didukung oleh ponsel Google.

— KirstenPowell
sumber
Ponsel Google menjatuhkan Flash di Android 4.0 (ICS), dan pertanyaan ini bukan tentang iPhone.
— greg.kindel
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.