在IE中加载webvtt轨道
Loading webvtt track in IE
我正在加载一个webvtt文件。工作正常,但在IE11中没有提示。
WEBVTT FILE
00:00:01.000 --> 00:00:04.000
Let's take a look at the 4th platform preview of IE10
00:00:04.000 --> 00:00:06.000
running on the Windows 8 Developer Preview
代码内部:
var trackNode = jQuery("<track default>");
// videoNode is just a <video> with <source> child
videoNode.append(trackNode);
trackNode.attr({
label: "Captions",
kind: "metadata",
src: "localhost:1234/example&output=vtt"
});
trackNode.on("load", function() { // I have also tried using "loadedmetadata" instead of load, but nothing changed
console.log(this.track.cues.length);
});
在Chrome中我可以看到有2个提示,但在IE11中我看到0
即使在所有内容加载后,我将其放入控制台:
jQuery("track").track.cues.length
我仍然得到0在IE和2在Chrome
我错过了什么吗?
更新1:在做了一些重构之后,我在控制台看到了这个错误:MEDIA12604:文本轨迹:未知的MIME类型。hr = 8007000 b。然后我发现了这个帖子:WinJS视频元素中的HTTP字幕
我想这可能是服务器的问题。
更新2:MEDIA12604:文本轨道:未知的MIME类型。hr = 8007000 b。已排序,但在IE
在IE11中,您需要在服务器上定义WebVTT的MIME类型。那就是text/vtt。请注意,IE仍然不支持WebVTT功能,如::cue或位置标记。一些第三方播放器,如JW Player,在不同程度上支持它们。
这个问题已经有一个公认的答案,但我希望为下一个开发人员节省一些时间。
我发现IE10和IE11不支持加载跨域VTT文件为<track>
,即使CORS是启用的(Access-Control-Allow-Origin: *
响应头)。为了添加IE对标题的支持,我必须使用如下所示的脚本。
此脚本通过AJAX下载每个VTT文件,创建blob URL,并用其各自的blob URL替换每个<track>
src。这只在IE中运行。
window.addEventListener("load", function() {
if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
// Not IE, do nothing.
return;
}
var tracks = document.querySelectorAll("track")
for (var i = 0; i < tracks.length; i++) {
loadTrackWithAjax(tracks[i]);
}
});
function loadTrackWithAjax(track) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 && this.responseText) {
// If VTT fetch succeeded, replace the src with a BLOB URL.
var blob = new Blob([this.responseText], { type: 'text/vtt' });
track.setAttribute("src", URL.createObjectURL(blob));
}
};
xhttp.open("GET", track.src, true);
xhttp.send();
}
<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>
想在这里补充一下,在解决IE11中的MIME类型问题后,我仍然得到错误代码:MEDIA12608: Timestamp should be '-->'. hr=80004004
。修复方法是删除时间戳中的第1000位数字。例如:将00:00:00.000 --> 00:01:10.000
更改为00:00:00.00 --> 00:01:10.00
- 轨道用RJS的替代品
- 如何获得字幕显示与zurbs基金会's轨道滑块
- THREE.js轨道控制不工作
- 如何设置第一个子元素's的单选按钮已在轨道上检查4
- 重定向到具有轨道的html5模式中的正确角度路线
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 在另一个模板轨道内成型
- 多次启动轨道滑块的问题
- Epic编辑器可以't访问我的文本区轨道
- 轨道:在保存父元素之前保存子元素
- 单击轨道link_to后,jQuery ready 未触发
- 骨干和轨道集合.创建等待
- 在没有轨道的水豚中下载文件
- 如何传递参数轨道
- 轨道 - 格式和渲染 - 它们如何工作
- 三.js轨道控制.js可以改变反Y轴旋转吗?
- 在轨道上的 Ruby 文本字段中动态显示数据
- 轨道-不正确的资产加载
- 轨道:涡轮链接回到页面顶部
- 在IE中加载webvtt轨道