HTML:
<h1>Get track example</h1>
<video controls>
<source src="media/test.mp4" />
<track id="entrack" label="English subtitles" kind="captions" src="media/test-en.vtt" srclang="en" default />
</video>
<div style="display:block; overflow:auto; height:200px; width:650px; border: 1px solid;" id="display"></div>
使用Javascript:
document.getElementById("entrack").addEventListener("load", function () {
var myTrack = this.track; // get text track from track element
var myCues = myTrack.cues; // get list of cues
for (var i = 0; i < myCues.length; i++) {
// append track label
document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>");
}
});
我尝试使用addEventListener()
创建此页面。加载曲目后,提示列表将显示在&#34; div&#34;元件。
但是我遇到了麻烦,它只适用于Chrome,而其他浏览器则没有。
没有发生错误。
谁能告诉我什么是错的?
已编辑:如果我有一个按钮并在其上侦听点击事件。像这样:
document.getElementById("mybutton").addEventListener("click", function () {
var myTrack = document.getElementById("entrack").track; // get text track from track element
var myCues = myTrack.cues; // get list of cues
for (var i = 0; i < myCues.length; i++) {
// append track label
document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>");
}
}, false);
它适用于Firefox。
那么......点击&#39;之间的区别是什么?并且&#39;加载&#39;事件
答案 0 :(得分:1)
可能是因为你没有给addEventListener
函数第三个参数,即true
或false
,意思是“使用捕获”。
试试这个:
document.getElementById("entrack").addEventListener("load", function() {
var myTrack = this.track; // get text track from track element
var myCues = myTrack.cues; // get list of cues
for (var i = 0; i < myCues.length; i++) {
// append track label
document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>");
}
}, false); // here it is
答案 1 :(得分:0)
我搜索了这个问题并找到了一些信息。但是,通过我的测试,它不可能,因为Firefox和其他浏览器没有完全实现轨道标记。
查看MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement
TrackElement有一个名为readyState的属性。它应该告诉你它是加载,加载还是错误。
在chrome中,以下代码返回2.这意味着,它已加载
document.getElementById("entrack")
但在firefox中,相同的代码返回undefined。所以,这意味着firefox甚至没有实现readyState属性。
我建议你听一下视频标签加载事件。或者,甚至更好,作为一种解决方法。您可以对跟踪文件执行AJAX请求,而不是监听跟踪加载事件,并且在回调中,它将确保文件存在并加载,因此您可以运行代码。
但是,还有另一个问题。如果浏览器不支持track元素,即使您对加载事件问题使用了一些解决方法。您的代码无效,因为您正在使用Javascript API进行曲目。
您可以使用以下代码检查浏览器是否支持跟踪功能。
var supportsTrack = !!document.createElement('track').track;
if(supportsTrack) {
// Do your job here.
}
答案 2 :(得分:0)
这可能是因为赛道已加载。所以你等待已经发生的事情。或者因为您使用的是错误版本的Firefox,它在加载事件名称中有一个拼写错误,并将其称为loaded instead of load。这是一个简单的模式来实现这一点:
var myTrack = document.getElementById("entrack");
var myTrackListener = function(){
if(this.readyState == 2){
myTrack.removeEventListener('load', myTrackListener);
myTrack.removeEventListener('loaded', myTrackListener);
//start to do something
}
};
myTrack.addEventListener('load', myTrackListener);
myTrack.addEventListener('loaded', myTrackListener);
myTrackListener.call(myTrack);
以下demo也使用此模式,此处为sourcecode。您可能希望使用webshim,它不仅可以填充跟踪元素,还可以修复一些浏览器错误/问题; - )。
答案 3 :(得分:-1)
您必须在IE9之前的IE版本中使用attachEvent。在使用attachEvent之前检查是否定义了addEventListener。
var onTrack = document.getElementById("entrack");
if (onTrack.addEventListener) {
onTrack.addEventListener("load", loadTrack, false);
}
else {
onTrack.attachEvent("onload", loadTrack);
}
function loadTrack() {
var myTrack = this.track; // get text track from track element
var myCues = myTrack.cues; // get list of cues
for (var i = 0; i < myCues.length; i++) {
// append track label
document.getElementById("display").innerHTML += (myCues[i].getCueAsHTML().textContent + "<br/>");
}
}