Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
    <h3>HTML track descriptions</h3>
    <button id="buttonLoadFirstTrack" onclick="forceLoadTrack(0);" disabled>Start listening to cuechange events for track 0 (English subs)</button> <p>
  <button id="buttonLoadThirdTrack" onclick="forceLoadTrack(1);" disabled>Start listening to cuechange events for track 1 (German subs)</button><p>
    <div id="trackStatusesDiv">
  </div>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
AuroreDechampspro
0viewers