Author Topic: Custom Interface to Video Player  (Read 19800 times)

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #15 on: August 02, 2014, 01:14:30 AM »
A friend is helping me with the javascripting side.  It is available on github here:

https://github.com/mdausmann/clare-video-player

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #16 on: August 02, 2014, 05:31:52 AM »
Can you explain how it works and how to install it?

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #17 on: August 04, 2014, 01:28:06 AM »
Hi Wim

Apologies, the documentation is non-existent!  I will need to work on that asap.

In the mean time, here is the unit in action.  Now waiting for my daughter to get home from school to try it out.


fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #18 on: August 04, 2014, 06:52:03 AM »
So happy!  She has really taken to it.  Thanks to a suggestion from my wife, I have eliminated the button which navigates the next video.  Clare wasn't getting it.  So now the button for Wiggles either starts the wiggles, if something else was playing, or goes to the next Wiggles video.  This arrangement works well.  And the plastic lunch box is holding up well.  Things are attached with alligator clips (being a prototype) but it is still working after a number of hours.

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #19 on: August 04, 2014, 07:15:26 AM »
Hi FF,

On first sight the unit does like a lot on my design. Looks good!
The most important thing is that it works and your daughter is able to use it as intended!

I can see you are using a five-button input device.
Can you tell me the function of each button?

The thing I'm curious about is how you convert your movies and how you've organize them by means of data structure and interface.

In my 'offline' project I was used to convert every single DVD to MPEG4 with handbrake (http://handbrake.fr/).
Then I used a naming convention to store the movies in a local folder and linked each movie as ID to the MySQL database.
Then I organised the movies with PHP/MySQL and build an XHTML/CSS interface to make them available in a webbrowser.
The cumbersome encoding process was eventually the reason for me to stop the project.

So, I'm very curious how you handle these things?!

Wim
« Last Edit: August 07, 2014, 10:34:00 AM by Wim »

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #20 on: August 05, 2014, 09:22:39 AM »
Hi Wim

Thanks for the encouragement!

Currently it is a four button configuration.  5th button I decided was not necessary and is not connected to makey.

One button is a pause the video.  Otherwise I would go crazy as it keeps playing all the time.....

The other three buttons represents a group of videos (such as The Wiggles).  The first press of the button starts the first video in the array.  Subsequent presses advance to the next video.  There is a button for Wiggles, Yo Gabba Gabba and Bear in the Big Blue House.

Easy to add other videos but not had the time to drill the holes to put more in.  Plus these are her most watched videos.

The video names are stored in an array in Javascript.  Pressing the button increments the array and hence the video name to play.

code snip below

var videos = {
  tte:["TTTE01.m4v","TTTE02.m4v","TTTE03.m4v","TTTE04.m4v"],
  wiggles:["WIGGLES01.mp4","WIGGLES02.mp4","WIGGLES03.mp4","WIGGLES04.mp4","WIGGLES05.mp4","WIGGLES06.mp4","WIGGLES07.mp4","WIGGLES08.mp4","WIGGLES09.mp4","WIGGLES10.mp4","WIGGLES11.mp4"],
  itng:[],
  music:[],
  bear:["BEAR01.mp4","BEAR02.mp4","BEAR03.mp4","BEAR04.mp4","BEAR05.mp4","BEAR06.mp4","BEAR07.mp4","BEAR08.mp4","BEAR09.mp4","BEAR10.mp4","BEAR11.mp4","BEAR12.mp4","BEAR13.mp4","BEAR14.mp4","BEAR15.mp4","BEAR16.mp4"],
  gabba:["GABBA01.mp4","GABBA02.mp4","GABBA03.mp4","GABBA04.mp4","GABBA05.mp4","GABBA06.mp4","GABBA07.mp4","GABBA08.mp4","GABBA09.mp4","GABBA10.mp4","GABBA11.mp4","GABBA12.mp4","GABBA13.mp4","GABBA14.mp4","GABBA15.mp4","GABBA16.mp4","GABBA17.mp4","GABBA18.mp4","GABBA19.mp4","GABBA20.mp4"],
  hive:["HIVE01.mp4","HIVE02.mp4"]
}

function playNextVideo(){
  currentVideo++;
  if(currentVideo > selectedVideos.length-1){
    currentVideo = 0;
  }
  playVideo();
}


function playVideo(){
  var video = document.getElementById("Video1");
  if(selectedVideos[currentVideo]){
    video.src = selectedVideos[currentVideo];
    video.load();
    video.play();     
  }else{
    video.src = "";
  }
  video.webkitRequestFullscreen();
}

Like your issue, it will be difficult to maintain this list especially for other people.  I want to write a script which generates this js file based on the videos contained in the folder.

For encoding I am using ffmepg.  It is pretty good to make a h264 standard for showing in html5 video.  Simple command line stuff.  If I knew how to write a batch script I could do them all over night.

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #21 on: August 05, 2014, 11:15:04 AM »
Can you explain how it works and how to install it?

From the github site, download the zip file.  Then extract all the files into a single folder.  Open the file called cvp.html in Chrome (tested) or Firefox (untested).  As an example, then press the letter "t" on the keyboard.  This opens the first video in the ttte group.  To navigate through different ttte videos, press the space bar.

For features and different key mappings, read the cvp.js file.

Note : I will be updating the github soon with a new version.  And this has only been tested on windows.

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #22 on: August 07, 2014, 05:09:14 AM »
Keep up the good work!

How is your internet connection and coverage?
Try the following link: http://www.productiondesign.nl/productiondesign//alex/view.php?q=wiggles&maxResults=50&Zoek.x=0&Zoek.y=0

It might suit your daughter as well and works best in full screen Google Chrome on Windows.

Functions:
TAB = navigate to next item (Green and second button on my hardware)
ENTER = select item or play movie  (Yellow and third button on my hardware)
CTRL+F4 Close movie  (Red and fourth button on my hardware)
LEFT-ARROW-KEY = rewind movie  (White and first button on my hardware)

Please note that the text to speech language is set to Dutch on my website!!


fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #23 on: August 07, 2014, 09:09:58 AM »
Clare had a great time navigating through all those Wiggles.  My offline system is faster but your content is much bigger.  Plus displaying youtube directly solves any copyright issues. 

Great job!

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #24 on: August 07, 2014, 10:53:03 AM »
Not to mention bandwidth and transit!
« Last Edit: August 07, 2014, 10:54:35 AM by Wim »

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #25 on: November 01, 2014, 03:00:27 AM »
It has taken a while but got the second version of the control box completed.  Now it is not in a lunch box anymore!

Also got it working on a chrome book which lowered the cost of the computing side quite a bit.

I really want to get the computing side to a raspberry pi + omxplayer but do not have the skills or the time to take it on sadly.  But the html5 version is working fine and very robust.  Just painful to convert all the videos.