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

Question

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()制作这个页面。加载曲目时，提示列表将显示在“div”元素上。

但是我遇到了麻烦，它只适用于Chrome，而其他浏览器则没有。

没有发生错误。 谁能告诉我什么是错的？

JSFiddle

编辑：如果我有一个按钮，并听取它上面的点击事件。像这样：

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。

那么......“点击”和“加载”事件有什么区别？

Answer 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

Answer 2

这可能是因为赛道已经加载。所以你等待已经发生的事情。或者因为你正在使用一个有缺陷的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，它不仅可以填充tracks元素，还可以修复一些浏览器错误/问题;-)。

Answer 3

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

看看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.
}

Answer 4

在我的情况下，能够触发load事件，我只是设置轨道元素的模式。

我用track.mode = 'hidden'或者你可以设置show取决于要求。

希望它会帮助某人

Answer 5

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