Deskripsi audio yang boleh diakses untuk video html5-tutorial js-php.cn

Accessible Audio Descriptions for HTML5 Video

Ringkasan mata utama

Keterangan audio yang cacat penglihatan memerlukan peralatan penyuntingan video profesional untuk dikodkan dan tertanam dalam trek audio berasingan fail video. Proses ini sering tidak realistik untuk kebanyakan pencipta kandungan.
, yang secara teorinya membolehkan pelaksanaan butang suis untuk penerangan audio dan mengawal jumlah audio dan video secara berasingan. Walau bagaimanapun, pelayar kini mempunyai sokongan terhad untuk ciri ini. audioTracks
, ciri audio dan video HTML5 yang membolehkan menyegerakkan pelbagai sumber. Ciri ini kini terhad dalam sokongan penyemak imbas, tetapi boleh menggunakan ciri -ciri yang sedia ada dan dilaksanakan secara meluas untuk memulakan dan menyimpan dua fail media yang disegerakkan serentak. MediaController

Pelanggan baru -baru ini meminta saya membuat pemain video yang boleh diakses dan dia benar -benar mahukan salah satu ciri untuk menjadi penerangan audio. Deskripsi audio bertujuan untuk orang buta atau orang yang mengalami masalah visual, memberikan maklumat suara tambahan untuk menggambarkan butiran visual penting. Secara tradisinya, video dengan deskripsi audio perlu dibuat secara khusus, dan audio dikodkan dalam trek berasingan fail video tunggal. Ini memerlukan peralatan penyuntingan video yang cukup profesional untuk menyandarkan trek audio ini, yang menjadikannya sukar bagi kebanyakan pencipta kandungan untuk dicapai. Inilah yang saya lihat dalam talian dengan penerangan audio. Sebagai contoh, BBC IPlayer menawarkan beberapa kandungan sedemikian, tetapi pemain video tidak dapat mengawal jumlah relatif dan tidak dapat mematikan penerangan audio-anda hanya boleh menonton versi individu atau bukan deskripsi pertunjukan. HTML5 debut

Spesifikasi video HTML5 tidak menyediakan

objek, yang memungkinkan untuk melaksanakan butang suis dan mengawal audio dan video secara berasingan. Tetapi sokongan penyemak imbasnya hampir tidak hadir - pada masa penulisan, hanya IE10 menyokong ciri ini. Bagaimanapun, apa yang dikehendaki oleh pelanggan saya adalah penerangan audio dalam fail berasingan yang boleh ditambah ke video tanpa membuat versi berasingan dan mudah dibuat tanpa menggunakan perisian khusus. Sudah tentu, ia perlu berjalan dalam beberapa pelayar. Jadi idea seterusnya saya ialah menggunakan `audioTracks`, ciri audio dan video HTML5 yang membolehkan anda menyegerakkan pelbagai sumber. Walau bagaimanapun, sokongan penyemak imbas untuknya sama tipis - pada masa penulisan, hanya Chrome menyokong ciri ini. Tetapi anda tahu - walaupun tanpa sokongan ini, jelasnya bukan masalah untuk memulakan dua fail media pada masa yang sama, hanya perlu diselaraskan. Jadi, bolehkah kita mencapai ini menggunakan ciri -ciri yang sedia ada dan dilaksanakan secara meluas? Acara Video `MediaController`

API Video menyediakan banyak peristiwa yang boleh kita haun, yang harus menyegerakkan main balik audio dengan acara video:

acara "Play" (dicetuskan apabila video dimainkan).
acara "jeda" (dicetuskan apabila video dijeda).
acara "akhir" (dicetuskan pada akhir video).
acara "TimeUpdate" (terus dicetuskan apabila video dimainkan).

Acara "TimeUpdate" sangat kritikal. Kekerapan yang dicetuskan tidak ditentukan dan ia sebenarnya sangat berbeza - tetapi sebagai purata keseluruhan kasar ia bersamaan dengan 3-5 kali sesaat, yang cukup untuk tujuan kita. Saya telah melihat cara yang sama untuk mencuba menyegerakkan dua fail video, tetapi ini tidak begitu berjaya kerana perbezaan kecil walaupun jelas. Tetapi deskripsi audio biasanya tidak perlu disegerakkan dengan tepat - sama ada cara, kelewatan 100 milisaat boleh diterima - dan memainkan fail audio adalah kurang membebankan pada penyemak imbas. Oleh itu, kita hanya perlu menggunakan acara video sedia ada untuk mengunci main balik audio dan video bersama -sama:

Main audio semasa video sedang dimainkan.
Jeda audio apabila video dijeda.
Pada akhir video, jeda video dan audio secara serentak.
Apabila masa dikemas kini, jika masa audio berbeza dari masa video, masa audio ditetapkan untuk dipadankan dengan masa video.

Selepas beberapa eksperimen, saya mendapati bahawa hasil terbaik dapat diperoleh dengan membandingkan masa dalam beberapa saat, seperti yang ditunjukkan di bawah:

if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}

Salin selepas log masuk

Ini seolah -olah tidak bertentangan, dan pada mulanya saya fikir kita memerlukan data yang tepat yang kita boleh, tetapi nampaknya tidak berlaku. Dengan menguji dengan salinan audio teks trek video (iaitu, kedua -dua audio dan video menghasilkan bunyi yang sama), mudah untuk mendengar penyegerakan adalah baik atau buruk. Berdasarkan asas ini, saya mendapati bahawa nombor pembulatan mendapat hasil penyegerakan yang lebih baik daripada tidak membulatkan. Jadi, ini adalah skrip akhir. Jika penyemak imbas menyokong MediaController, kami hanya perlu menggunakannya, jika tidak, kami akan melaksanakan penyegerakan manual seperti yang diterangkan di bawah:

var video = document.getElementById('video');
var audio = document.getElementById('audio');

if(typeof(window.MediaController) === 'function') {
  var controller = new MediaController();
  video.controller = controller;
  audio.controller = controller;
} else {
  controller = null;
}

video.volume = 0.8;
audio.volume = 1;

video.addEventListener('play', function() {
  if(!controller && audio.paused) {
    audio.play();
  }
}, false);

video.addEventListener('pause', function() {
  if(!controller && !audio.paused) {
    audio.pause();
  }
}, false);

video.addEventListener('ended', function() {
  if(controller) {
    controller.pause();
  } else {
    video.pause();
    audio.pause();
  }
}, false);

video.addEventListener('timeupdate', function() {
  if(!controller && audio.readyState >= 4) {
    if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
      audio.currentTime = video.currentTime;
    }
  }
}, false);

Salin selepas log masuk

Sila ambil perhatian bahawa MediaController ditakrifkan oleh skrip sahaja, tetapi pengawal boleh ditakrifkan menggunakan atribut statik "MediroGroup":

<video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio>

Salin selepas log masuk

Jika kita melakukan ini, ia akan berfungsi di Chrome tanpa JavaScript. Ia akan menyegerakkan sumber media, tetapi pengguna tidak dapat mengawal audio (termasuk tidak dapat mematikannya) kerana penyemak imbas tidak tahu apa yang mewakili audio. Dalam kes ini, adalah yang terbaik untuk menyandikan audio ke dalam video, kerana kemudian ia boleh muncul dalam objek , yang boleh dikenali oleh penyemak imbas dan dapat menyediakan kawalan asli. Tetapi kerana kita tidak mempunyai data audioTracks, ini adalah soalan yang tidak relevan! Jadi jika skrip tidak tersedia, audio tidak akan dimainkan sama sekali. Ini adalah demo terakhir, yang boleh dijalankan dalam mana -mana versi terkini Opera, Firefox, Chrome, Safari, atau IE9 atau lebih baru: - Demo Penerangan Audio audioTracks

Sudah tentu, ini hanyalah bukti mudah demonstrasi konsep - tidak ada pengesanan fungsi awal, ia hanya mempunyai kawalan asas yang disediakan oleh harta "kawalan" asli. Untuk pelaksanaan yang betul, ia memerlukan kawalan tersuai untuk menyediakan (antara lain) butang untuk menukar audio dan slider volum yang berasingan. Antara muka juga boleh diakses melalui papan kekunci, yang tidak berlaku dalam kawalan asli penyemak imbas. Ia juga perlu mengendalikan penampan dengan betul - sebenarnya, jika anda mencari titik di mana video telah dimuatkan, audio akan terus bermain dengan bebas sehingga video cukup memuat semula untuk menyegerakkannya. Saya juga ingin menyebut bahawa keterangan itu sendiri hampir tidak memenuhi piawaian profesional! Di situlah anda dapat mendengar saya, merakam dan menukar menggunakan Audacity. Tetapi itu sahaja, saya fikir ia secara berkesan menunjukkan betapa rendahnya halangan teknikal pendekatan ini. Saya tidak perlu mengedit video, dan saya membuat audio dalam satu jam dengan perisian percuma. Sebagai bukti konsep, saya fikir ia sangat berjaya - saya percaya pelanggan saya akan sangat berpuas hati! Soalan Lazim (FAQ) mengenai penerangan audio yang boleh diakses untuk video html5

Apakah kepentingan mengakses penerangan audio dalam video HTML5?

Deskripsi audio yang boleh diakses memainkan peranan penting dalam membuat video HTML5 lebih inklusif dan mesra pengguna. Mereka menyediakan kesamaan pendengaran maklumat visual, yang sangat bermanfaat untuk pengguna cacat penglihatan. Deskripsi ini menggambarkan butiran visual penting yang tidak dapat difahami oleh trek utama. Dengan menambah penerangan audio yang boleh diakses, pencipta kandungan dapat memastikan bahawa video mereka dapat diakses oleh penonton yang lebih luas, dengan itu mempromosikan kemasukan digital.

Bagaimana untuk menambah penerangan audio ke video html5 saya?

Menambah Penerangan Audio ke video HTML5 termasuk beberapa langkah. Pertama, anda perlu membuat trek audio berasingan yang menggambarkan elemen visual video. Ini boleh dilakukan menggunakan pelbagai perisian penyuntingan audio. Sebaik sahaja trek penerangan audio sudah siap, anda boleh menambahkannya ke video HTML5 anda menggunakan elemen dengan atribut jenis yang ditetapkan kepada "Deskripsi". Ini akan memastikan bahawa trek penerangan audio diiktiraf dan dimainkan dengan video.

Mengapa video HTML5 saya tidak boleh bermain?

Mungkin terdapat beberapa sebab mengapa video HTML5 anda tidak dapat dimainkan. Ini mungkin disebabkan oleh masalah dengan fail video itu sendiri, seperti tidak pengekodan dengan betul. Ini juga mungkin disebabkan oleh masalah penyemak imbas web atau pemain video tidak menyokong format video. Untuk menyelesaikan masalah, cuba bermain video pada pelayar yang berbeza atau pada peranti yang berbeza. Jika masalah berterusan, anda mungkin perlu menyemak fail video dan pastikan formatnya disokong oleh HTML5.

Apa format yang biasa digunakan disokong dalam video HTML5?

video HTML5 menyokong beberapa format video biasa, termasuk MP4, Webm, dan OGG. Format MP4 disokong secara meluas dalam semua pelayar dan peranti utama, menjadikannya pilihan yang popular untuk video dalam talian. WebM dan OGG adalah format sumber terbuka dan disokong secara meluas, walaupun mereka mungkin tidak berfungsi dengan baik dalam semua pelayar.

Bagaimana untuk memperbaiki ralat "HTML5 Video File Not Found"?

"Fail video html5 tidak dijumpai" ralat biasanya berlaku apabila penyemak imbas tidak dapat mencari fail video yang ditentukan dalam atribut sumber elemen <video></video>. Untuk menetapkan ralat ini, pastikan laluan fail di harta sumber adalah betul dan fail video berada di laluan yang ditentukan. Jika laluan fail betul, periksa sama ada fail video dalam HTML5 dan format yang disokong oleh penyemak imbas.

bagaimana membuat video HTML5 saya responsif?

Untuk membuat video HTML5 anda responsif, anda boleh menggunakan CSS untuk menetapkan lebar video kepada 100% dan ketinggian ke auto. Ini akan memastikan bahawa video itu ditingkatkan atau turun agar sesuai dengan lebar bekasnya, yang membolehkannya bertindak balas terhadap saiz skrin yang berbeza.

Bolehkah saya menambah sari kata atau narasi ke video html5 saya?

Ya, anda boleh menambah sari kata atau narasi ke video HTML5 anda menggunakan elemen dengan atribut jenis yang ditetapkan kepada "kapsyen" atau "sarikata". Anda perlu membuat fail WebVTT dengan sari kata atau narasi, dan kemudian merujuk fail ini dalam atribut SRC elemen.

Bagaimana untuk mengawal main balik video HTML5 saya?

HTML5 menyediakan beberapa kawalan main balik video terbina dalam, termasuk bermain, jeda, volume dan skrin penuh. Kawalan ini boleh diaktifkan dengan menambahkan atribut kawalan ke elemen <video></video>. Di samping itu, anda boleh menggunakan JavaScript untuk membuat kawalan dan interaksi tersuai.

Bolehkah saya membenamkan video html5 di laman web saya?

Ya, anda boleh menggunakan elemen <video></video> untuk membenamkan video HTML5 di laman web anda. Anda perlu menggunakan atribut SRC untuk menentukan sumber fail video, dan anda juga boleh menambah atribut pilihan seperti kawalan, autoplay, dan gelung untuk menyesuaikan main balik video.

Apakah faedah menggunakan HTML5 untuk main balik video?

HTML5 menyediakan banyak manfaat untuk main balik video. Ia menyokong pelbagai format video, menyediakan kawalan main balik video terbina dalam, dan membolehkan penambahan ciri kebolehaksesan seperti sarikata dan penerangan audio. Di samping itu, video HTML5 boleh responsif, memastikan mereka kelihatan hebat pada semua peranti dan saiz skrin. Akhirnya, kerana HTML5 adalah standard web, ia disokong oleh semua pelayar web moden tanpa plug-in atau perisian tambahan.

Atas ialah kandungan terperinci Deskripsi audio yang boleh diakses untuk video html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!