小编CeA*_*ado的帖子

我是新手,在HTML 5中使用音频标签,并希望建立一个播放器.我想在轨道标签中使用VTT文件进行测试,以查看隐藏式字幕的工作原理.

这是我的代码:

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kink="caption" src="myaudio.vtt" srclang="en" label="English">
</audio>

根据我所读到的,跟踪应该适用于音频和视频,这从可访问性的角度来看是有意义的.什么是没有意义的是我试图加载它的错误:

"Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access."

在查看crossorigin属性时,我收到很多关于CORS和"anonymous"和"user-certificate"的预期值的令人困惑的文章.尝试要么导致类似的错误.

关于为什么这不起作用的任何想法？

我发现在使用元素src标记加载视频时处理错误与使用<video>元素加载视频时处理错误之间存在一些差异<source>.

例如,如果我尝试使用元素的src标记加载未找到的视频流(HTTP 404)video,则会触发事件并且元素存储错误数据:

HTML

<video src="http://not.found.url"></video>

JS

var video = document.querySelector('video');

video.addEventListener('error', function(evt) {
  console.log(evt.target.error); // Object
});
video.load();

的video元件存储MediaError在对象error:

error: {
  code: 4,
  message: 'MEDIA_ELEMENT_ERROR: Format error'
}

但是,当我尝试使用source元素加载相同的视频流时:

HTML

<video>
  <source src="http://not.found.url">
</video>

JS

var video = document.querySelector('video');
var source = document.querySelector('source');

video.addEventListener('error', function(evt) {
  // This event is not triggered
  console.log(evt.target.error); // null
});

source.addEventListener('error', function(evt) {
  console.log(evt.target.error); // …