如何为HTML5视频加载VTT文件启用CORS? [英] How to enable CORS for html5 video loading vtt file?
问题描述
我的需要
html5 video元素同时加载保存在其他域中的视频和vtt文件.
问题
vtt未加载，并且错误从原点开始的文本轨道已被阻止:与文档不在同一原点，并且track元素的父级没有'crossorigin'属性.
我的调查
我知道需要使用CORS，这样才能将vtt成功加载到html5中.
我已在服务器端启用CORS，以接收来自任何域的请求.
有些文章说，将 crossorigin 或 crossorigin ="anonymous" 添加到`元素中可以完成此任务，但不起作用.视频根本没有加载，或者出现了不同的错误
我已将代码放在下面
< body>< div class ="container">< video id ="myvideo"控制preload ="auto" width ="640" height ="264"自动播放>< source src = http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type ="video/mp4"></source>< track kind ="captions" label =英语" srclang ="zh-CN" src = http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt默认值></video></body> 希望这可以帮助下一个人偶然发现这个SO问题.我发现IE(10和11)即使启用了CORS，也不支持为< track> 加载跨域VTT文件.为了增加IE对字幕的支持，我不得不使用下面的脚本.
此脚本通过AJAX下载每个VTT文件，并创建一个 blobURL ，并用其各自的Blob URL替换每个< track> src.
window.addEventListener("load"，function(){如果(window.navigator.userAgent.indexOf("MSIE")< 0&& window.navigator.userAgent.indexOf("Trident/")< 0){//不是IE，什么也不做.返回;}var track = document.querySelectorAll("track")for(var i = 0; i< tracks.length; i ++){loadTrackWithAjax(tracks [i]);}});函数loadTrackWithAjax(track){var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function(){如果(this.readyState == 4&& this.status == 200&& this.responseText){//如果VTT提取成功，则将src替换为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();} <视频控件预加载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 =英语" srclang ="zh-CN" src ="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"默认></video> My Need
html5 video element loads both a video and a vtt file saved in a different domain.
The problem
vtt is not loaded and error Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.
My investigation
I am aware that CORS needs to be used so vtt can be loaded in html5 successfully.
I have enabled CORS on server side for requests from any domain.
Some articles say adding crossorigin or crossorigin="anonymous" into ` element can do the job, but it doesn't work. Either the video is not loaded at all or different errors appear
I have put my code here below
<body>
<div class="container">
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
</body>
Hopefully this helps the next person to stumble upon this SO question. I discovered that IE (10 and 11) does not support loading a cross-origin VTT file for a <track>, even if CORS is enabled. In order to add IE support for captions, I had to use a script like the one below.
This script downloads each VTT file via AJAX, creates a blob URL, and replaces each <track> src with its respective blob URL.
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>
这篇关于如何为HTML5视频加载VTT文件启用CORS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
