Integrating a new js video player into a scene


#1

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>


(Hans-Gerd Claßen) #2

guess you’ll have to provide your files for someone to check if it’ll work …
one thing: you can always reference to hypes resources-folder by ‘${resourcesFolderName}’ instead of any hardcoding.


#3

Thank you. I have already pasted the html code. Can you tell me the steps i need to take to do the same thing in hype. Lime the header inserts can be translated to hype by including the script files in the resources. So the header is taken care of.
I wanted to know what other steps in hype should i take can replicate this index html file (the body section).

I will tried removing the hard coded references to files with the variable you suggested. But the video still does not load.


(Hans-Gerd Claßen) #4

without the ability to test it will be rather hard to help … good luck :smile:

one way that’ll work anyway is to include your videoplayer as a widget (iFrame)


#5

Wanted the player to function on a page without having to go for an iframe. How do i sent you the js and associated files so that you could check them out for me? I am new to this forum and am unable to attach script and text files here - the upload option here says it only supports image files here. Can I have your email so I could attach the files in an email and send it to you? Thanks again.


(Hans-Gerd Claßen) #6

normally you can upload *.zip-files (@Daniel are there restrictions¿)


#8

Here is how i am trying to call the function in hype - like as in the index html
It did not allow text file attachment so i created a zip out of it.
index file call.txt.zip (1.7 KB)


(Hans-Gerd Claßen) #9

seems to work, but the corresponding css is missing
could you provide the vplayer.css from your first post …

then i could test this too and provide the (hopefully) working example

btw. i indeed googled for vPlayer.js but didn’t find and actual description rather than css-file …


#11

Thank you for resolving this for me.

It is quite clear now where I was going wrong and what needed to be done.