<track> ile <audio> için Altyazılar, altyazıların nasıl görüntüleneceği

Parça etiketli bir sesli ses dosyasının metin transkripsiyonunu eklemeye çalışıyorum. Video etiketinin varsayılan davranışı onları göstermektir (çalışır). Varsayılan olarak, ses etiketinin altyazıları otomatik olarak görüntüleyebilmesi için bir çeşit 'kanvas' (video bile olsa bir video etiketi siyah alan) eksikliği söz konusudur. Video etiketini kullanabilirdim ama çirkin bir çözüm gibi hissediyordum. Yine de kodumun anlamlarını kırmak istemiyorum.<track> ile <audio> için Altyazılar, altyazıların nasıl görüntüleneceği

Subtillerin görüntüleneceği alanın görüntüsünü zorlamak için bir çeşit CSS var mı?

<audio controls> 
    <source src="test.ogg" type="audio/ogg"> 
    <source src="test.mp3" type="audio/mpeg"> 
    <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track> 
    Your browser does not support the audio tag. 
</audio>

Okuman için teşekkürler.

kaynak

2014-05-05 phl

'kind' niteliğini değiştirmeyi deneyin için' "başlıkları" '. AFAIK '" altyazı "' sadece "

[WebVTT için spesifikasyon] 'a göre (http://dev.w3.org/html5/webvtt/#h4_processing-model). Sadece '

[Parça elemanındaki HTML 5.1 özellikleri] 'ne göre (http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-track-element) izler olabilir medya öğesinin bir alt öğesi olarak kullanılır Ses, bir medya öğesidir.Rahatla ilgili olaylar, javascript'te gayet iyi çalışır.Onlar sesin içinde bunları kullanırken bir sorun görmüyorum. Ses parçaları için kullanılacak farklı bir dosya biçimi var mı o zaman? – phl

Parça etiketinde kind = "attribute" kullanmayı deneyin.

kaynak

2015-11-16 20:08:06

Kişisel bir uygulama için ses kayıtları için bir altyazı dosyası oluşturmaya çalışırken benzer bir gereksinim var. Otomatik olarak kaydırma yapmaya ve ses kaydına göre metin öbeklerini vurgulamaya çalışıyorum. Video elemanına benzer bir tuval olmadığı için, eleman üzerinde ayarlanmış .vtt dosya başlıklarını görüntüleyen elemanı bulamadım. Ve konteyner üzerinde ilişkili .vtt görüntülemek için özel bir tuval bileşeni yazmaya karar verdim ve bu HTML5 Video Caption maker demo kullanışlı buldu, bir atış verebilir.

kaynak

2016-08-01 22:42:46

Altyazı veya altyazı stil oluşturmak için css'de seçebileceğiniz html'de bir sözde öğe var. color, opacity, font ve benzeri bazı css özelliklerini verebileceğiniz ::cue öğesinden oluşur. Hepsinin, metinler için kullanılan stiller olduğunu görüyorsunuz.
video etiketlerini nasıl kullanacağımı öğrendiğimde bunları öğrendim. Ancak Google'da bir arama yaptı ve MDN hakkında çok yardımcı bir makale buldum. Altyazı stiliyle ilgili her şeyi here'da görebilirsiniz.
Ve eklentileri kullanmanın bir nedeni yok;).

kaynak

2017-03-17 17:39:47

Bunu yalnızca CSS ile nasıl yapacağımı bilmiyorum, ancak video metin parçaları ve JavaScript ile benzer bir şey (özel ipuçları) yaptım. Umarım ses parçaları ile ne yapmak istediğinizi gerçekleştirmek için aynı TextTrack olaylarını kullanabilmeniz gerekir.

Özel bir işlevi parçanın oncuechange olayına bağlayabilir ve ardından kendi altyazılarınızı oluşturmak için parçanın activeCues özelliğini kullanabilirsiniz. Bu özel div daha sonra istediğiniz şekilde konumlandırılabilir veya stillenebilir.

Bu, metin izini yakalamalı ve bir işaret değişikliği olduğunda her zaman etkin olan işaretin metnini almalıdır.

$('audio')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text; 
    $('#yourCustomCaptions').html(currentCue); 
}

Daha sonra her işaret metni alıp görüntülemek istediğiniz div özel enjekte.

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

kaynak

2017-11-08 19:16:17

<track> ile <audio> için Altyazılar, altyazıların nasıl görüntüleneceği

cevap

İlgili konular