I have a js custom video player that I want to use in a scene. I have tested the code by using it in a normal html file and it works fine. But I am new to hype and its js functionality. How can i use the player in a similar manner like I use it in my index.html attached here.
I tried attaching the js and css files needed using the resources tab. But i am unsure how to create the div container ‘demo’ and how to call the functions. Obviously the syntax and usage will be different from what I use in the index file and I do not need to use the var= new vplayer construct in the same manner.
Can someone help and show me the steps/syntax? How to create the container div? How to use the vplayer function and how to pass the source file name of the file that the js code will be using?
The vplayer.js loads some text file (a vtt file) that we pass as a parameter (src param). How should I construct the src parameter to show the actual file location of the vtt file I want to use.
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video player test page</title>
<meta charset="utf-8">
<!-- videoplayer includes -->
<link rel="stylesheet" href="127.0.0.1:8000/css/vplayer.css">
<script type="text/javascript" src="127.0.0.1:8000/js/vplayer.js"></script>
<!-- thumbnails includes -->
<link rel="stylesheet" href="127.0.0.1:8000/css/thumbnails.css">
<script type="text/javascript" src="127.0.0.1:8000/js/thumbnails.js"></script>
<!-- playlist includes -->
<script type="text/javascript" src="127.0.0.1:8000/js/jquery.js"></script>
<link rel="stylesheet" href="127.0.0.1:8000/css/flexslider.css">
<script type="text/javascript" src="127.0.0.1:8000/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/playlist.js"></script>
</head>
<body>
<div id="demo"></div>
<script>
//create the video player
var player=new VPlayer({
//mandatory parameters
container:"demo",//id for the containing element - do not use many stylings on this div - the video will try to fit inside it.
src:["http://captionatorjs.com/git/video/arduino.m4v","video/mp4"],//the video file to play
//optional parameters
track:[{kind:"chapters",src:"127.0.0.1:8000/files/test.vtt",type:"text/vtt",srclang:"en"}],//tracks - you can add multiple tracks, only the first one is used though
preload:"auto",//tells the player to start buffering the video right away - default: "auto"
loop:false,//set to true for the video to play in a loop - default:false
autoplay:false,//set to true to have the video start playing as soon as it loaded enough - default:false
sleepTime:0,//sets the time after which the interface buttons fade out if there's no activity - set to 0 for the controls to stay on all the time - default:2000
hideControls:false,//set to true to completely disable the controls - default:false
hideOverPlayButton:true,//set to true to hide the big play button when the video is paused
stopOnChapters:true,//set to true to have the video pause as it reaches a new chapter - default:false
logo:{src:"127.0.0.1:8000/files/logo.png",URL:"http://www.google.com",target:"_blank"},//defines an image for the logo (size:65x65 pixels) and the url to go to if the logo is clicked
restartChapterKey:116,//keycode to scan for to restart the current chapter - default:33
nextChapterKey:190,//keycode to scan for to skip to the next chapter - default:34
playPauseKey:32,//keycode to scan for to start/pause the player - default:66
volumeUpKey:38,//keycode to scan for to raise the volume by 10% - default:38 - up arrow
volumeDownKey:40,//keycode to scan for to lower the volume by 10% - default:40 - down arrow
fullScreenKey:13,//keycode to scan for to toggle fullscreen mode - default:65
fastForwardKey:39,//keycode to scan for to fast forward - default:39
fastRewindKey:37,//keycode to scan for to fast rewind - default:37
disabledKeys:[116,27],//key codes that will be disabled - default [116,27]
drawCurrentTimeIndicator:true,//set to false to disable showing the current time bubble - default:true
drawRemainingTimeIndicator:true,//set to true to show video remaining time - default:false
filesr:60,//defines a number of days - if the current date surpasses the 1st of January 2016 by that number of days, the video will not load - default:false = disabled
fastForwardRate:0.05//defines what fraction of the video to skip when using the fast forward function - default:0.05 which represents 5%
});
</script>
</body>
</html>
