VideoJS Described Video

Described Video plugin for videojs

View the Project on GitHub ICTASolutions/videojs-described-video

Described Video plugin for videojs

Add a button to Video.js to allow switching between two different versions of a video: the original and one with 'audio descripton' (additional narration added into the soundtrack to assist understanding of the video, especially by people who are blind or low-vision).

Usage

    <link rel='stylesheet' href='node_modules/video.js/dist/video-js/video-js.css'>
      <script src='node_modules/video.js/dist/video-js/video.dev.js'></script>
      <script src="node_modules/es5-shim/es5-shim.js"></script>

      <!-- include the describedVideo plugin -->
      <link rel='stylesheet' href='src/described-video-button.css'></script>
      <script src='dist/bundle.js'></script>
    </head>
    <body>
      <video class="video-js vjs-default-skin" controls width='640px' height='360px'>
      </video>

      <script>
        var describedVideoInfoMP4 = [{
          // First is the original (default) set of sources
          sources: [{
            src: 'my_video.mp4',
            type: 'video/mp4'
          }],
          poster: 'poster.png'
        }, {
          // Second is the alternate (described video) set of sources
          sources: [{
            src: 'my_video_with_description.mp4',
            type: 'video/mp4'
          }],
          poster: 'poster_with_description_logo.png'
        }];

        var video = document.querySelector('video');
        var player = videojs(video, {});
        player.describedVideo(describedVideoInfoMP4);
      </script>
    </body>

Examples


Acknowledgement

This plugin is based on the playlist plugin from Brighcove.

LICENSE