A plugin for video
Once you've added the plugin script to your page, you can use it with any video:
<script src="video.js"></script>
<script src="stepplayer.js"></script>
<script>
videojs(document.querySelector('video')).stepplayer({
steps:[
{time: x},
{time: y},
{time: z},
...
]
});
</script>
There's also a working example of the plugin you can check out if you're having trouble.
You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:
Type: boolean
Default: true
It initiates the default accordion state and toggle method. Set hasAccordion: false
to disable the default collapse function.
If hasAccordion: true
, set up your accordion using data-step
attribute with according step number, see below:
<div class="accordion">
// If the first time value in steps is not equal to 0,
// add an introduction section by setting the data-step to 0
<div class="accordion-group" data-step="0">
<div class="accordion-heading">
<a class="accordion-toggle"> Introduction</a>
</div>
<div id="step0" class="accordion-body collapse in">
<div class="accordion-inner">some description</div>
</div>
</div>
<div class="accordion-group" data-step="1">
<div class="accordion-heading">
<a class="accordion-toggle"> Step 1</a>
</div>
<div id="step1" class="accordion-body collapse in">
<div class="accordion-inner">some description</div>
</div>
</div>
Type: boolean
Default: true
This propoty controls the click event of accordions. If it is set to true
, toogling accordion will jump the video to its according point. Otherwise, it will not interfere with the video player.
Type: String
Default: "vjs-stepplayer"
Set your own classname to customize the css of video player control bar.
Type: boolean
Default: true
It enables/disables the keyboard control of video player. Currently enabled keyboard controls includes:
- Space key to play/pause video
- Left arrow key to the previous section
- right arrow key to the next section
Type: array
Default: []
The steps
propoty takes in a array of objects, each of which should at least contains a time
propoty, like this: {time: 10}
Type: function
Default: null
This propoty takes a callbck function. It fires when the video player is reached preset stop points.
- 0.1.0: Initial release