Crossorigin des erreurs lors du chargement de VTT fichier

Je suis nouveau à l'aide de la balise audio en HTML 5 et je voulais bâtir un joueur. J'ai voulu tester à l'aide d'un VTT fichier dans une voie balise de voir comment le sous-titrage pourrait fonctionner.

Voici mon code:

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

Selon ce que j'ai lu, la piste est censé travailler à la fois de l'audio et de la vidéo qui fait sens à partir d'une accessibilité stand-point. Ce n'est pas logique est l'erreur que j'obtiens en essayant de le charger:

"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."

Lors de la recherche de la crossorigin attribut, je reçois beaucoup de confusion des articles sur les CORS et les valeurs attendues des "anonymes" et "utilisateur de certificat". Veut, soit les résultats d'une erreur similaire.

Toutes les idées pour lesquelles cela ne fonctionnera pas?

Je peux confirmer que le problème pour Google Chrome 39 et tous les fichiers chargés par file:///. Il fonctionne, si chargé via http://.
Je vais avoir le même problème avec Chrome 42. Pas de problème avec Firefox 37.0.2 si
J'ai résolu cela en exécutant chrome avec la sécurité est désactivée: chrome.exe --disable-web-security. voir les réponses ici: stackoverflow.com/questions/3102819/...
il arrive souvent lors de l'exécution à l'extérieur d'un serveur web

OriginalL'auteur linnium | 2014-04-23

html5-audio webvtt

4

Voir ici pour une mise à jour de la liste de navigateur natif de la WebVTT de soutien. Si votre navigateur ne prend pas en charge native CC comme WebVTT vous devez construire votre propre analyseur en JavaScript pour afficher (remarque: il existe d'autres CC un format SRT et TTML/DFXP).

Vous pouvez trouver des informations fiables sur l'élément de la piste ici et ici. Notez qu'il y a une différence entre ce que l'on appelle les sous-titres, légendes et descriptions.

La plupart des navigateurs ne le supportent pas une voie balise lorsqu'il est utilisé avec une balise audio - si, en théorie, ils devraient vous trouverez pratiquement il ne fonctionne pas comme d'aujourd'hui. Peut-être qu'il a quelque chose à voir avec WebVTT sens Web Vidéo Pistes de Texte. Ceci est décrit ici.

Vous devez construire votre propre analyseur si vous voulez afficher votre sous-titres codés le long d'une balise audio. Je vous conseille de prendre un coup d'oeil à la source de mediaelementjs pour avoir une idée sur la façon d'y remédier.

De la SCRO est nécessaire uniquement lorsque vous demandez des fichiers CC qui ne sont pas sur le même domaine que la page hébergeant l'audio/vidéo de la balise. Il ne devrait pas être nécessaire dans votre cas. Plus sur De la SCRO.

Votre message d'erreur semble indiquer que vous avez un problème de configuration quelque part dans votre système (peut-être que votre vtt fichier est sur NFS?).

OriginalL'auteur Arnaud Leyder
9

C'est un vieux post, mais le premier que j'ai frappé lors de Googler pour Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access.

L'OP semble avoir ce problème localement, et il pouvait résoudre que par la désactivation de google Chrome web de sécurité comme indiqué ci-dessus. Mais les utilisateurs plus souvent voir ce lors de l'accès à leurs pistes de texte à partir d'un domaine différent. Pour le fixer dans un environnement de production pour tous les utilisateurs, vous devez faire deux choses:
1. Ajouter le droit de la SCRO en-têtes pour le site d'hébergement de VTT fichier.
2. Ajouter le crossorigin="anonymous" attribut à votre site audio/vidéo de l'élément.
Si vous n'avez pas accès au site hébergeant le fichier vidéo, vous pourriez être coincé. Mais si vous le faites, vous devez ajouter l'en-tête Access-Control-Allow-Origin:'*'. Je suis la manipulation sur un Node/Express serveur comme ceci:
```
   var app = express()
    app.use(function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*')
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
      next()
    })
```
L'audio/vidéo de l'élément est plus facile de corriger. De votre site le code HTML de la page, ajouter l'attribut suivant.
```
<audio controls crossorigin="anonymous">
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kink="caption" src="my_file_hosted_on_a_different_domain.vtt" srclang="en" label="English">
</audio>
```
J'espère que cette réponse aide à quelqu'un... c'était un ennuyeux problème à résoudre.

OriginalL'auteur TimHayes
3

J'ai été aux prises avec le même problème: le media player fonctionne très bien, mais le sous-titrage fichier s'exécute en cross-domain questions. Certains navigateurs étouffer, d'autres ne le font pas. Certains navigateurs voulez une catégories de documents spécifiques à la politique et n'acceptera pas un caractère générique dans le permis d'origine. Et qui me rend la vie compliquée.

Nous pourrions stocker les fichiers de légendes sur notre premier serveur de contenu. Mais, nous préférons maintenir la vidéo et de la légende fichiers au même endroit (dans mon cas, sur Amazon Web Services S3/CloudFront). Pour obtenir autour de la SCRO complications, nous avons construit un petit script côté serveur pour attraper la petite légende des fichiers à partir de la CAN. Ce qui élimine tous les cross-domain questions.

OriginalL'auteur Charlie Hileman
2

https://github.com/videogular/videogular/issues/123

Ajouter crossorigin="anonymes" à la balise vidéo pour permettre de charger des fichiers VTT
à partir de différents domaines.

C'est une étrange question, même si votre SCRO est réglé correctement sur le serveur, vous devrez peut-être avez-vous une balise HTML de l'étiquette elle-même en tant qu'anonyme pour la SCRO politique de travail.

OriginalL'auteur Ray Foss
0

Vous pouvez ajouter les lignes suivantes dans votre site Web.la configuration, si vous obtenez 404: not found.
```
<system.webServer>
    <staticContent>
        <remove fileExtension=".vtt" /> 
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" /> 
    </staticContent>
</system.webServer></configuration>
```
Espérant que cela aide les autres. .vtt n'est pas pris en charge à partir de zéro, et donc chrome (entre autres) bloque le contenu pour des raisons de sécurité.

OriginalL'auteur Kristian Jansson Mclarion

Vous devez vous connecter pour publier un commentaire.