Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Joe Sleiman
Joe Sleiman
5,921 Points

when i use track for caption i faced a problem

when i use this html tag an error occured : i don't know how to fix it can someone help me?

<track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>

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.

Joe Sleiman
Joe Sleiman
5,921 Points

no it's html video and audio

Philip G
Philip G
14,601 Points

Could you please post some code / a link to your host/workspace?

Poul Larsen
Poul Larsen
5,902 Points

Her is a link "how to markdown code in forum"

https://teamtreehouse.com/community/howto-guide-markdown-within-posts

or you can also use codepen: http://codepen.io/

Joe Sleiman
Joe Sleiman
5,921 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Video and Audio</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <h1>HTML Video and Audio</h1>

    <div class="wrapper">

        <h2>Video Example </h2>

      <video controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
        <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>

      </video>

      <h2>Audio Example</h2>

      <audio controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">

      </audio>

    </div>

  </body>
</html>


     <!--
      <video src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4" controls />
      another method to include video depending on file video format that browser can support
      -->
Poul Larsen
Poul Larsen
5,902 Points

Did anyone get the point?

3 Answers

Poul Larsen
Poul Larsen
5,902 Points
Poul Larsen
Poul Larsen
5,902 Points

I don't know why you are getting the error but here i added track tag for subtitles

I added the tack tag in the html code and the CC button appears in the video player.

I found a tutorial her: http://www.html5rocks.com/en/tutorials/track/basics/

under the video you can download the teachers note with all the files

Video: https://teamtreehouse.com/library/html-video-and-audio/media-basics/the-audio-element-3

Teachers note zip file: http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/the-audio-element.zip

You have to make your own vtt file

<video controls>
  <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
  <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">

  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>

</video>
Poul Larsen
Poul Larsen
5,902 Points
Poul Larsen
Poul Larsen
5,902 Points

I found out that it only work on localhost i used xampp

example: http://localhost/poul/the-audio-element/simple-video.html

see image example: http://i.imgur.com/eYU4IGQ.jpg

I have a project file that works:

  1. Download: http://tinyurl.com/z83tt59
  2. Copy the whole folder in your htdocs folder in your xampp
  3. Remember to start XAMPP Apache and MySQL
  4. and open http://localhost/the-audio-element/simple-video.html

write comment if it doesn't work :)

Joe Sleiman
Joe Sleiman
5,921 Points
Joe Sleiman
Joe Sleiman
5,921 Points

okay poul Larsen i will check it after new year :P