jQuery plugin that offers an interface for controlling (play, pause and stop) some of the popular video players and providers, so that you don't have to deal with the particularities of each video API. The plugin is most useful when you have multiple types of videos.
At the moment, support was added for YouTube, Vimeo, HTML5, Video.js, Sublime Video and JW Player.
<script type="text/javascript" src="https://github.com/bqworks/video-controller/raw/v1.4.1/path/to/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://github.com/bqworks/video-controller/raw/v1.4.1/path/to/jquery.videoController.min.js"></script>
<body>
<iframe id="my-video" src="http://www.youtube.com/embed/oaDkph9yQBs?enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#my-video').videoController();
});
</script>
Once the plugin is instantiated, you can use the API provided by the plugin for playing or pausing videos, as well as listening for events.
The available public methods are:
play - plays the videopause - pauses the videostop - stops the videoreplay - replays the videoExample:
<script type="text/javascript">
$(document).ready(function() {
$('#my-video').videoController();
});
function playVideo() {
$('#my-video').videoController('play');
}
function pauseVideo() {
$('#my-video').videoController('pause');
}
function stopVideo() {
$('#my-video').videoController('stop');
}
</script>
</head>
<body>
<iframe id="my-video" src="http://www.youtube.com/embed/oaDkph9yQBs?enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<a href="#" onclick="playVideo();">Play</a>
<a href="#" onclick="pauseVideo();">Pause</a>
<a href="#" onclick="stopVideo();">Stop</a>
</body>
The available events are:
videoReady - triggered when the video is ready for interactionvideoStart - triggered the first time when a video starts playingvideoPlay - triggered whenever a video starts playing, whether it's the first time or after it was paused or stoppedvideoPause - triggered when the video is pausedvideoStop - triggered when the video is stopped. Usually, when a video is stopped it's actually paused and the playhead is moved to the beginning of the videovideoEnded - triggered when a video endsExample 1:
<script type="text/javascript">
$(document).ready(function() {
$('#my-video').videoController({
videoReady: function() { console.log('ready'); },
videoStart: function() { console.log('start'); },
videoPlay: function() { console.log('play'); },
videoPause: function() { console.log('pause'); },
videoEnded: function() { console.log('ended'); }
});
});
</script>
Example 2:
<script type="text/javascript">
$(document).ready(function() {
$('#my-video').videoController();
$('#my-video').on('videoPlay', function(event) {
console.log('video with the ID ' + event.video + ' has started playing');
});
$('#my-video').on('videoEnded', function(event) {
console.log('video has ended');
});
});
</script>
The iframe embeds need to have the enablejsapi=1 parameter appended to the URL of the video.
<iframe id="my-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1" width="500" height="350" frameborder="0" allowfullscreen></iframe>
The iframe embeds need to have the api=1 parameter appended to the URL of the video.
<iframe id="my-video" src="http://player.vimeo.com/video/43401199?api=1" width="500" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Simple HTML5 videos don't need any preparation.
<video id="my-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
</video>
Videos that use the Video.js library have their HTML markup modified. This creates some problems if we want to instantiate the plugin on the video element. The solution is to create a container element and add the video inside the container. To this container we'll add the data-videojs-id attribute in order to indicate the id attribute of the video element.
<video id="my-video" class="video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none"
data-setup="{}">
</video>
$(document).ready(function() {
$('#video-container').videoController();
});
If you prefer to not use a container, you will need to instantiate the plugin after the video was set up.
<video id="my-video" class="video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none"
data-setup="{}">
</video>
$(document).ready(function() {
videojs('my-video').ready(function() {
$('#video-container').videoController();
});
});
Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your page. More information about how to use Video.js, in general, can be found on the official Video.js page.
No preparation is required, other than setting up the videos as the Sublime Video documentation indicates.
<video id="my-video" class="sublime" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
</video>
Please note that, in order to use SublimeVideo, you will also need to load a script in your page which you need to download from the SublimeVideo page. More information about how to use SublimeVideo, in general, can be found on the official SublimeVideo page.
Just like Video.js, JW Player videos modify the HTML markup and we need to use a container element to facilitate the integration with the Video Controller plugin. The container will have the data-jwplayer-id attribute which will indicate the id attribute of the video element.
Loading the video...
$(document).ready(function() {
jwplayer("my-video").setup({
file: "http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4",
image: "http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg",
width: 500,
height: 350
});
$('#video-container').videoController();
});
It's also possible to not use a container element, but in that case the plugin needs to be instantiated after the video was set up.
Loading the video...
var video;
$(document).ready(function() {
jwplayer("my-video").setup({
file: "http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4",
image: "http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg",
width: 500,
height: 350,
events: {
onReady: function() {
// if the flash player is used, the set ID will be attributed to an object element.
// However, we can't instantiate the plugin on an object element,
// so we instantiate it on the object's wrapper instead
video = $('#my-video').is('object') ? $('#my-video').parent() : $('#my-video');
video.videoController();
}
}
});
});
The plugin is available under the MIT license.
$ claude mcp add video-controller \
-- python -m otcore.mcp_server <graph>