Bagaimana saya tahu jika browser saya kompatibel dengan html5?

Selama pembangunan kembali Pemutar Media yang Dapat Diakses Nomensa baru-baru ini, kami memutuskan untuk menambahkan dukungan video HTML5 opsional untuk klien yang menggunakan JWPlayer. Saat ini tidak mungkin untuk menghasilkan berbagai jenis pemutar media (Flash/html5) melalui banyak API JavaScript vendor pihak ke-3. Namun, karena kami bekerja dengan JWPlayer secara lokal, kami harus dapat mengimplementasikan pemutar media HTML5 untuk browser yang mendukung dan dapat memainkan jenis media yang paling umum.

Perlu disebutkan bahwa video di blog Nomensa menggunakan pemutar YouTube. Dengan demikian, video HTML5 tidak akan tersedia di blog sampai YouTube memungkinkan untuk menghasilkan keluaran video HTML5 menggunakan API JavaScript mereka

Browser yang berbeda menawarkan tingkat dukungan yang berbeda untuk audio dan video HTML5. Jika beberapa browser mendukung satu jenis file media, browser lain akan gagal melakukannya. Sementara vendor browser terus mengimplementasikan dukungan fitur HTML5 harus menjadi lebih baik dan lebih baik. Namun, situasi saat penulisan ini menyatakan bahwa kami tidak dapat (dan tentunya tidak boleh) berasumsi bahwa browser akan memutar media HTML5. Kita juga harus memikirkan browser lama, bukan? . Namun, metode tersebut mengharuskan kita untuk mengetahui jenis mime dan codec mana yang diperlukan untuk memutar file sebelum dapat digunakan (lihat Spesifikasi Video W3C HTML 5 untuk informasi lebih lanjut tentang jenis dan codec Mime)

Menentukan jenis Mime

Dalam contoh kami, kami memutuskan bahwa hanya ada sedikit jenis media yang didukung oleh JWPlayer sehingga kami dapat menentukan jenis mime dan codec yang diperlukan berdasarkan ekstensi file. Pertimbangkan contoh kode di bawah ini (Tidak semua jenis file yang didukung ditampilkan)

var get_mime = function(filetype){
var mimetype = '';
var media_container = 'video';
switch(filetype){
case 'mp4':
mimetype = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
break;
case 'ogg':
mimetype = 'video/ogg; codecs="theora, vorbis"';
break;
case 'webm':
mimetype = 'video/webm; codecs="vp8, vorbis"';
break;
case 'mp3':
mimetype = 'audio/mpeg';
media_container = 'audio';
break;
}
return {'mimetype':mimetype,'container':media_container};
};

Argumen untuk fungsi ('filetype') harus berupa string yang berisi ekstensi file tanpa titik awal. Berdasarkan hal ini, kami secara manual menyetel tipe mime, codec yang diperlukan, dan tipe elemen sebelum mengembalikan informasi yang terbungkus di dalam objek JavaScript. Dengan informasi ini kami sekarang dapat menentukan apakah browser pengguna kemungkinan besar dapat memutar media secara native atau tidak

Mendeteksi Dukungan Browser

Setelah kami memiliki informasi tentang jenis mime file media dan nama elemen HTML, kami dapat dengan mudah menentukan apakah browser dapat memutar media. Pertimbangkan cuplikan kode berikut

var supports_media = function(mimetype, container) {
var elem = document.createElement(container);
if(typeof elem.canPlayType == ‘function’){
var playable = elem.canPlayType(mimetype);
if((playable.toLowerCase() == 'maybe')||(playable.toLowerCase() == 'probably')){
return true;
}
}
return false;
};

Dua argumen untuk fungsi ini adalah sebagai berikut

• Mimetype – Jenis pantomim dan codec yang diperlukan sebagai string e. g. 'video/webm;


• Wadah – Nama elemen HTML dinyatakan sebagai string e. g. 'audio' atau 'video'

Dengan parameter ini kami dapat membuat elemen HTML5or menggunakan JavaScript dan menyimpannya di memori. Setelah kita memiliki elemen ini di memori, kita dapat memeriksa untuk melihat apakah elemen tersebut berisi metode canPlayType (if(typeof elem. canPlayType == 'fungsi'){}). Jika metode canPlayType ada di elemen HTML kita, kita tahu bahwa browser yang digunakan memiliki beberapa tingkat dukungan media HTML5 yang terpasang di dalamnya. Menggunakan deteksi fitur (seperti di atas) adalah cara yang disukai untuk menguji kompatibilitas. Jika metode ini ada, kita tahu bahwa HTML5 memiliki beberapa tingkat dukungan, jika tidak, kita tidak dapat menggunakan HTML5 dan sebagai gantinya harus menggunakan Flash. Sangat sederhana. Ini lebih baik daripada menggunakan browser sniffing untuk menentukan apakah HTML5 didukung atau tidak (lihat perpustakaan javascript pemeriksaan masa depan untuk informasi lebih lanjut). Metode canPlayType mengambil string codec mime-type/required sebagai satu-satunya parameter (playable = elem. canPlayType(mimetype);) dan mengembalikan string lain yang menentukan kemungkinan browser dapat memutar file. Pada saat penulisan di sana, metodenya cenderung ke salah satu dari tiga string

1. “” string kosong (tanggapan negatif);


2. "mungkin";


3. "mungkin"

Jika browser yakin dapat memutar file media, browser harus mengembalikan status "mungkin". Jika browser pasti tidak dapat memutar file, metode harus mengembalikan string kosong. Semua hasil lainnya harus dilambangkan dengan kode respons "mungkin". Dalam contoh kami, kami memutuskan bahwa kami akan mencoba memutar media apa pun yang menurut browser dapat ditangani

Menyatukan semuanya

Sekarang kita memiliki dua fungsi untuk menentukan apakah browser akan dapat memutar file media yang diberikan, kita dapat menggunakannya untuk menentukan apakah akan menyajikan pemutar HTML5 atau yang berbasis Flash untuk browser lama atau tidak (Lihat contoh kode di bawah)

Contoh Kode

// Define the get_mime function
var get_mime = function(filetype){
var mimetype = '';
var media_container = 'video';
switch(filetype){
case 'mp4':
mimetype = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
break;
case 'ogg':
mimetype = 'video/ogg; codecs="theora, vorbis"';
break;
case 'webm':
mimetype = 'video/webm; codecs="vp8, vorbis"';
break;
case 'mp3':
mimetype = 'audio/mpeg';
media_container = 'audio';
break;
}
return {'mimetype':mimetype,'container':media_container};
};
// Check to see if the browser can render the file type
// using HTML5
var supports_media = function(mimetype, container) {
var elem = document.createElement(container);
if(typeof elem.canPlayType == ‘function’){
var playable = elem.canPlayType(mimetype);
if((playable.toLowerCase() == 'maybe')||(playable.toLowerCase() == 'probably')){
return true;
}
}
return false;
};
// When the DOM has loaded check the file extension of each media link
// and serve up appropriate media player
$(document).ready(function(){
$(‘a.youtube-links’).each(function(){
var path = $(this).attr(‘href’);
var extension = path.substring(path.lastIndexOf('.') + 1);
var extension_info = get_mime(extension);
if(supports_media(extension_info.mimetype, extension_info.container)){
// Serve up an HTML5 Media Player and controls
serve_html5();
}else{
// Serve up a flash based video for browsers that
//will not play the file using HTML5
serve_flash();
}
});
});

Kesimpulan

Apa yang ingin saya tunjukkan adalah bahwa menyediakan video di Internet sedemikian rupa sehingga dapat digunakan di berbagai browser, teknologi, dan sistem operasi yang berbeda-beda. Dengan meningkatnya popularitas perangkat seperti iPhone dan iPad (yang tidak dapat memutar Flash secara native), masuk akal untuk menyediakan media HTML5 untuk browser yang mendukungnya, kembali ke pemutar media Flash untuk yang tidak. Perangkat (seperti iPad) yang tidak mendukung Flash memiliki tingkat dukungan yang cukup baik untuk media HTML5. Dengan demikian, dengan menggunakan deteksi media HTML5 untuk menyajikan konten video dan audio dengan cara yang sesuai akan membantu Anda memperluas jangkauan konten multimedia

Bacaan lebih lanjut

Mulailah membangun aksesibilitas ke dalam proyek Anda di awal untuk menghemat waktu dan uang, jangan biarkan menggantung di backlog dan membiarkannya menumpuk debu. Bor masuk

Jika Anda ingin Nomensa membantu Anda dengan tantangan aksesibilitas atau memberi Anda evaluasi aksesibilitas situs web/aplikasi seluler Anda, jangan ragu untuk menghubungi kami

Anda dapat menghubungi kami di +44 (0) 117 929 7333 atau kirimkan formulir singkat ini. Sementara itu, lihat sepenuhnya layanan aksesibilitas digital yang kami tawarkan

Browser mana yang mendukung HTML5?

Bagaimana Anda bisa tahu apakah sebuah situs web sesuai dengan HTML5?

Bagaimana cara membuat browser saya mendukung HTML5?

Bagaimana cara memeriksa kompatibilitas lintas browser di HTML5?