javascriptTextTrackListonchange事件在IE和Edge中不起作用

TextTrackList.onchange事件在IE和Edge中不起作用.在Chrome和FireFox中,它可以正常工作.

我可以使用其他替代方法吗？我已经搜索了可用的事件,但找不到任何事件.

或如何创建解决方法？如此在所有浏览器中都能使用吗？

https://www.Javascripture.com/TextTrackList

var video = document.getElementById('video');
video.textTracks.addEventListener('change', function () {
console.log("TextTracks change event fired!");
});

video {
max-width: 400px;
max-height: 400px;
}

解决方法:

您也许可以创建一种polyfill.

首先要检测我们是否支持事件,我们可以检查(在window.TextTrackList中为“ onchange”).因此,我们可以有条件地集成我们不完善的polyfill,并保持正确的实现不变.

然后,我们可以遍历TextTrackList的TextTracks上的每个x次,以找到哪个是活动的,应该将其模式设置为“显示”.

现在,我们只需要存储先前的活动曲目并检查当前曲目是否相同即可.否则,请触发该事件.

所以一个简单的实现可能是

// in an outer scope
// textTracks is our TextTrackList object
var active = getActive();
// start polling
poll();
function poll() {
// schedule next check in a frame
requestAnimationFrame(poll);
var current = getActive();
if (current !== active) {
active = current; // update the active one
// dispatchEvent is not supported on TextTrackList in IE...
onchange({
target: textTracks
});
}
}
function getActive() {
for (var i = 0; i if (textTracks[i].mode === 'showing') {
return textTracks[i];
}
}
}


但是要实现更好的polyfill,我们将要覆盖TextTrackList原型的原始addEventListener,removeEventListener和onchange属性.

这是一个粗略的实现,它将不涉及[add / remove] EventListener的第三个参数.

(function() {
/* Tries to implement an 'change' Event on TextTrackList Objects when not implemented */
if (window.TextTrackList && !('onchange' in window.TextTrackList.prototype)) {
var textTracksLists = [], // we will store all the TextTrackLists instances
polling = false; // and run only one polling loop
var proto = TextTrackList.prototype,
original_addEvent = proto.addEventListener,
original_removeEvent = proto.removeEventListener;
var Onchange= {
get: getonchange,
set: setonchange
};
Object.defineProperty(proto, 'onchange', onchange);
Object.defineProperty(proto, 'addEventListener', fnGetter(addListener));
Object.defineProperty(proto, 'removeEventListener', fnGetter(removeListener));
function fnGetter(fn) {
return {
get: function() {
return fn;
}
};
}
/* When we add a new EventListener, we attach a new object on our instance
This object set as '._fakeevent' will hold informations about
the current EventListeners
the current onchange handler
the parent

video {
max-width: 400px;
max-height: 400px;
}