Javascript 视频跟踪元素仅在Google Chrome上触发加载事件

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>

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

它在Firefox上工作

---

所以。。。“单击”和“加载”事件之间有什么区别？

可能是因为您没有为

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

document.getElementById（“entrack”）.addEventListener（“加载”，函数（）{
var myTrack=this.track；//从track元素获取文本跟踪
var myCues=myTrack.cues；//获取提示列表
对于（var i=0；i”；
}
}，假）；//给你

您必须在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/>");
    }
}

var onTrack=document.getElementById（“entrack”）；
if（onTrack.addEventListener）{
onTrack.addEventListener（“加载”，加载轨迹，错误）；
}
否则{
onTrack.attachEvent（“装载”，装载轨道）；
}
函数loadTrack（）{
var myTrack=this.track；//从track元素获取文本跟踪
var myCues=myTrack.cues；//获取提示列表
对于（var i=0；i”；
}
}

我搜索了这个问题，找到了一些信息。但是，根据我的测试，这是不可能的，因为Firefox和其他浏览器没有完全实现track标记

看看MDN

TrackElement有一个名为readyState的属性。它应该告诉您它是正在加载、已加载还是出错

在chrome中，以下代码返回2。也就是说，它被加载了

document.getElementById("entrack")

但在firefox中，相同的代码返回未定义的。因此，这意味着firefox甚至没有实现readyState属性

我建议您收听视频标签加载事件。或者，更好的是，作为一种解决办法。不必监听track load事件，您可以对track文件执行AJAX请求，在回调中，它将确保文件存在并已加载，以便您可以运行代码

但是，还有一个问题。如果浏览器不支持轨迹元素，即使您使用了一些解决加载事件问题的方法。您的代码将无法工作，因为您正在使用Javascript API进行跟踪

您可以使用下面的代码检查浏览器是否支持轨迹功能

var supportsTrack = !!document.createElement('track').track;
if(supportsTrack) {
    // Do your job here.
}

---

这可能是因为轨道已加载。所以你在等待已经发生的事情。或者因为您使用的是有缺陷的Firefox版本，它在加载事件名称中有一个输入错误并调用了它。下面是一个简单的模式来实现这一点：

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

---

下面也使用此模式，下面是。您可能希望使用，它不仅可以填充轨迹元素，还可以修复一些浏览器错误/问题；-）

在我的情况下，如果能够触发

load

事件，我只需设置track元素的模式

我使用了

track.mode='hidden'

或者您可以根据需要设置

show

---

希望它能帮助别人

我要做的第一件事就是逐步完成Firefox/IE的调试程序。你能给我们提供一个JSFIDLE或一些要测试的东西吗？JSFIDLE示例不起作用。它应该使用真实的视频和曲目文件。@João Mosmann:您可以从中获取标题和视频，值得一试，但第三个参数在现代浏览器中是可选的，以便快速回复。我试过这个。。。但没什么变化。给我一个工作，因为我能看到这里的代码是正确的。

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