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

时间:2014-08-06 03:35:43

标签: javascript html5 html5-video

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,而其他浏览器则没有。

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

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。

那么......点击&#39;之间的区别是什么?并且&#39;加载&#39;事件

4 个答案:

答案 0 :(得分:1)

可能是因为你没有给addEventListener函数第三个参数,即truefalse,意思是“使用捕获”。

试试这个:

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