Elemen <video> HTML5 di Android

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?

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.

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();"/>

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.

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>

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/

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

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

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

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.

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

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.

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.

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

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

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