В настоящее время я занимаюсь разработкой приложения Java с использованием SpringMVC, JavaScript, Jquery, одно из наших требований - добавить субтитры в формате vtt к нашему видео.для этой части я использовал тег track в html 5, чтобы сделать это, и код ниже:
sb += '<div class="fileinput fileinput-preview videoDiv" style="width: 320px;margin-right: 0px;" id="video'+videoData.videoId+'" ><video id="preview'+videoData.videoUrl +'" src='+ videoData.videoUrl+' controls style="object-fit: fill;width: 100%; " crossorigin="anonymous"><track src="'+videoData.subtitlesUrl+'" kind="subtitles" srclang="en" label="English" default> </video></div>';
мы сохранили наше видео и субтитры в S3, я уже добавил политику CROS для нашего S3,и это работает.он отвечает разрешить заголовок перекрестного происхождения как *.
В начале все работает, видео и субтитры работают хорошо,
, но одна странная вещь происходит после того, как мы внесли некоторые изменения в наш проект видеосервиса, вместо этого мы использовали Akamai cdn для ссылкииз прямой ссылки S3 для видео, мы разворачиваем проекты в двух разных средах тестирования, а затем видео с субтитрами не всегда может работать хорошо в Chrome, но хорошо работает в Firefox и Safari, я привык подозревать, что это проблема вS3, но это хорошо работает в сафари и Firefox, поэтому я думаю, что это должно быть проблемой в моем коде.
Я попытался удалить атрибут crossorigin в теге video, видео также может хорошо загружаться в Chrome.
Для рабочего процесса видео части: мы являемся розничной компанией, поэтому видео используется пользователем, используемым для их обзоров, после того как пользователь загрузит новое видео, оно сначала будет преобразовано в S3 через лямбду, а затембудет использовать другую лямбду, чтобы получить субтитры vtt и сохранить их в нашем s3.
Политика CROS, которую я настроил на нашем S3, приведена ниже:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
</CORSRule>
</CORSConfiguration>
Я действительно надеюсь, что кто-то может помочь мне решить эту проблему в Chrome. По моему мнению, я считаю, что перекрестная идентификацияПричиной возникновения проблемы, поэтому мне интересно, есть ли способ поставить субтитры без кросс-оригинала?и более стабильно в Chrome, Firefox и Safari?
Спасибо!