Described Video plugin for videojs
View the Project on GitHub ICTASolutions/videojs-described-video
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).
<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>
This plugin is based on the playlist plugin from Brighcove.