Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using HTML views of tracks</title>
</head>
<body>
<video id="myVideo" preload="metadata" controls crossOrigin="anonymous">
    <source src="https://mainline.i3s.unice.fr/mooc/elephants-dream-medium.mp4" type="video/mp4">
    <source src="https://mainline.i3s.unice.fr/mooc/elephants-dream-medium.webm" type="video/webm">
    <track label="English subtitles" kind="subtitles" srclang="en"
           src="https://mainline.i3s.unice.fr/mooc/elephants-dream-subtitles-en.vtt" >
    <track label="Deutsch subtitles" kind="subtitles" srclang="de"
           src="https://mainline.i3s.unice.fr/mooc/elephants-dream-subtitles-de.vtt" default>
    <track label="English chapters" kind="chapters" srclang="en"
           src="https://mainline.i3s.unice.fr/mooc/elephants-dream-chapters-en.vtt">
 </video>
  <p>
  <button onclick=displayTrackStatuses()>Refresh track statuses</button>
  <div id="trackStatusesDiv">
    
    <h3>HTML track descriptions</h3>
  </div>
</body>
</html>
 
#trackStatusesDiv {
  border:1px solid;
  height:auto;
  padding: 20px;
  margin-top:10px;
}
​
​
 
var video, htmlTracks;
var trackStatusesDiv;
​
window.onload = function() {
  // called when the page has been loaded
  video = document.querySelector("#myVideo");
  trackStatusesDiv = document.querySelector("#trackStatusesDiv");
  
  // Get the tracks as HTML elements
  htmlTracks = document.querySelectorAll("track");
  
  // display their status in a div under the video
  displayTrackStatuses();
};
​
function displayTrackStatuses() {
  trackStatusesDiv.innerHTML ="";
  
    // display track info
  for(var i = 0; i < htmlTracks.length; i++) {
    var currentHtmlTrack = htmlTracks[i];
        
    var label = "<li>label = " + currentHtmlTrack.label + "</li>";
    var kind = "<li>kind = " + currentHtmlTrack.kind + "</li>";
    var lang = "<li>lang = " + currentHtmlTrack.srclang + "</li>";
    var readyState = "<li>readyState = " + currentHtmlTrack.readyState + "</li>";
    
    trackStatusesDiv.innerHTML += "<li><b>Track:" + i + ":</b></li>"
      + "<ul>" + label + kind + lang + readyState + "</ul>";   
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AuroreDechampspro
0viewers