Lightweigt js-library to create interactive videos
Working example: http://www.blick.ch/8498934
- jQuery
html structur
<html>
<head>
<script type="text/javascript" src="app/interactivevideo.min.js"></script>
<link type="text/css" rel="stylesheet" href="app/interactivevideo.min.css">
</head>
<body>
<div id="ivideo_container"></div>
</body>
</html>Create new iVideo object by: var iVid = new iVideo(options)
Example:
var iVid = new iVideo({
"container": "#ivideo_container",
"json": "app/data.json",
"fadercolor": "#ffffff",
"functions": [my_function],
"ready": function(self) {
//Callback, when ready
}containerReferences the DOM-Element (#ivideo_container)jsonJson object or path to json filefadercolor(optional). Color for fading. Default: #000000functions(optional) If you have defined some function in the json object, you have to tell iVideo the name of these functionsread(optional) Callback, when iVideo is ready
iVid.play("main");Register with on
iVid.on("play", function(e) {
console.log("Video started", e);
});play. Start of the videofunctionWhen a function is called
Example. This configuration contains a video played in loop. A click on the middle ball will lead you another video (video_1). A click on the right ball will call the function my_function, which will show an alert box and plays the first video again.
{
"chapters": [
{
"id": "hauptmenu",
"src": "media/hauptmenu.mp4",
"onfinished": "loop",
"overlays": [
{
"position": ["0%", "0%"],
"dimension": ["100%", "100%"],
"href": "video_1",
"hover": "overlay_1.png"
},
{
"position": ["17%", "19%"],
"dimension": ["24%", "80%"],
"href": "video_2",
"hover": "overlay_2.png"
}
]
},
{
"id": "video_1",
"src": "video1.mp4",
"onfinished": "goto",
"goto": "hauptmenu"
},
{
"id": "video_2",
"function": "my_function"
}
]
}Each new element - video or function - id a chapter.
Each chapter needs the following property:
idUnique id (or name). Referenced byhrefandgoto
A chapter can have the following properties
srcpath to video fileonfinishedWhat should happends after the video ends. Options:loop,gotooder emptyloopPlay the video again (loop)gotoJump to another chapter. The chapter is defined by propertygoto
gotoIfonfinishset togoto, jump to this chapteroverlaysArray. Clickable area on video. See chapter "Overlays"functionCalls this function. The function has to be defined on initialization. Seefunctionsat the beginning of this file.
An overlay is a clickable area
positionArray. top, left. Write in percent, otherwise the video will not be responsive!dimensionArray. width, height. Write in percent, otherwise the video will not be responsive!hrefIf a chapter should be called after click, add here theidof thechapterhoverImage on mouse over. Needs the same dimension as the video