JASE V 4.0
Loading...
JASE V 4.0

LAB

Laboratory

Experiments and Jase addons (working but still under way because of some issues or not done yet)

Known issues with Jmedia
Android began to restrict the same way as apple mobile do. On some devices autoplay (audio and video) works, on some not. Also changing volume on audio isn't working with e.g. my Iphone. Things that use to be working in earlier versions.
Apple (and Android as well) claims that thats for security reasons. The real reason is, they need to sell more in theire Appstores. Almost 80% of all Apps in App store could be achieved with Javascript. So i wait for the day when apple and android disables Javascript completely on their mobile devices.

Jmedia

VIDEO

Experimental flipped

addVideo

Many people complains about the youtube API for no reason. It's pretty easy. But i made it easier for you by function "addVideo" 

 
element.addVideo(OBJECT);
//Background video
J('body').addVideo({playlist:'https://www.youtube.com/watch?v=CDnGP86PHcI',autoplay:true,loop:true,controls:false});
//GRID video
J('#video').addVideo({playlist:'ENngZlLXDZc USLTQVt8QyA',autoplay:true,loop:true,controls:true,background:true});
"addVideo" expects an object with at least the key "playlist"

Object default Keys

  • "playlist:" [STRING] Your youtube videos seperated by whitespace. Use full url or just the id behind "?v="
  • "autoplay:" [BOOLEAN] Autostart even with safari (But not apple mobiles). Default is false
  • "loop:" [BOOLEAN] Start over when your playlist has been played. Default is false
  • "controls:" [BOOLEAN] User see controlbar. (NOT SUPPORTED BY ALL BROWSERS) Default is true
  • "volume:" [NUMBER] Volume (0 - 100) Default is 100
  • "quality:" [STRING] (highres, hd1080, hd720, large, medium, small and default) Default is default
  • "background:" [BOOLEAN] Defines whether video should be positioned as baclground or not. By using document.body as element, it's always true. Otherwise Default is false
  • "fallbackimage:" [STRING] Defines an image that shown up while buffering. If no url is given default will be the youtube Hires Image of the first video in your playlist.
  • "disableBackgroundForMobiles:" [BOOLEAN] Apple mobiles do not support autoplay. So background Videos for document.body are disabled for it and only the fallbackimage will be shown. Set disableBackgroundForMobiles true in general if you want to disable for all mobiles. Default is true.

Object FUNCTION Keys

like e.g. OBJECT.FUNCTIONKEY:function(RETURNS){//DO SOMETHING WITH RETURNS}
  • "changeRate:" returns the video rate whenever it's changed (e.g. changeRate:function(rate){alert(rate);})
  • "onPlaybackRateChange:" (similar to changeRate) returns the video rate whenever it's changed (e.g. changeRate:function(rate){alert(rate);})
  • "pauseActive:" returns whenever the current video is paused (e.g. pauseActive:function(){alert('Video is paused');})
  • "playActive:" returns whenever the current video has started (e.g. playActive:function(){alert('Video has started');})
  • "stopActive:" returns whenever the current video has stopped (e.g. stopActive:function(){alert('Video has stopped');})
  • "qualityChanged:" returns quality whenever the current video quality has changed (e.g. qualityChanged:function(quality){alert('Current quality='+quality);})
  • "onPlaybackQualityChange:" (similar to qualityChanged) returns quality whenever the current video quality has changed (e.g. onPlaybackQualityChange:function(quality){alert('Current quality has changed to='+quality);})
  • "onError:" returns error code whenever an error occures. (e.g. onError:function(code){alert('Current errorcode='+code+' means '+this.currentError);})
  • "onError:" returns error code whenever an error occures. (e.g. onError:function(code){alert('Current errorcode='+code+' means '+this.currentError);})

Known issues

Console prints handleEvent errors for each video. (Typical Google Api Error). Some claims, that thats an google bug. But i'm still on it.
Plus (as you see in this examples) internetspeed is drinking beer in the basement and CPU cry's for mercy. Don't know if i can fix that, because thats the Youtube Google Api in general. But i do my very best.

Object status and control

addVideo adds an Object to your element called framer. Framer comes with several control functions
  • "Play Video" J('#video').framer.PLAY()
  • "Pause Video" J('#video').framer.PAUSE()
  • "Stop Video" J('#video').framer.STOP()
  • "set volume of current video" J('#video').framer.setVolume([NUMBER 0-100])
  • "mute current video" J('#video').framer.mute()
  • "unmute current video" J('#video').framer.unMute()
  • "change quality of current video" J('#video').framer.QUALITY([STRING])
  • "change rate of current video" J('#video').framer.changeRate([NUMBER])
And you can get informations about the current video status
  • "get available qualities for current video" var avaQual=J('#video').framer.getCurrentPossibleQuality()
  • "get quality of current video" var Quality=J('#video').framer.getQUALITY()
  • "get available rates for current video" var avaRates=J('#video').framer.getPossibleRates()
  • "get volume of current video" var volume=J('#video').framer.getVolume()
  • "check if current video is muted or not" var muted=J('#video').framer.isMuted() (returns true or false)
  • "get duration of current video in seconds" var duration=J('#video').framer.getDuration()
  • "get status of current video" var state=J('#video').framer.currentState RETURNS A STRING
  • "get error of current video " var error=J('#video').framer.currentError RETURNS A STRING or undefined if no error occures
Plus if you know about Youtube API you can get the playerobject itself
  • "Player" var player=J('#video').framer.player

Stick with Media (AUDIO ,mp3 only)

Yes im an musican too (guess all coders are beside real job)
This demonstration show, how this function (MP3) could be at max.
Click on play to start my music. Use the mixing board to control volume of band and my solos. Or choose between my solos by clicking solo.
Thats a rough and dirty experimental demonstartaion. So excuse that not all buttons do what they supposed to do and click twice if necessary.

If your device allows autoplay you're hearing music of my former band already. In that case click "STOP AUTOPLAY" before clicking "play" on the demonstration.


!Mobiles! Some of them can't handle volume regulation. On my Iphone (for example) all channels are fully there. You need to stop them by button. Don't know about other mobiles yet. Some mobiles can't play multiple files at once (sometimes you need to start them manually. Click twice if necessary). But im on it to fix.
Check mobiles. Some don't support autoplay at all. Some only plays a few seconds

STOP AUTOPLAY

summed up

The times of autoplay (e.g. beep on new textmessage) are gone for a lot of mobiles. Maybe me by myself or someone else find a hack for it. (Im on it)

Anyway. Here's how to use MP3

Call


 
<script type="text/javascript">
myelement.MP3({OBJECTKEYS});
</script>

OBJECT KEYS

  • "file:" URL to your mp3 file
  • "loop:" [BOOLEAN] Play again when finished. Default is false
  • "autoplay:" [BOOLEAN] Autoplay if possible. Default is false
  • "volume:" [NUMBER (0 - 100)] Sets volume if possible. Default is 100

Currently there is no check if device can play mp3

So you have to do that manually. MP3 also does, but theres no return (true or false). So set audio objects to display:none if no mp3 support.
To check you may use 

 
<script type="text/javascript">
var audio=newElement(false,'audio');
var canPlayMP3 = (typeof audio.canPlayType === "function" && audio.canPlayType("audio/mpeg;
codecs=mp3") !== "");
//canPlayMP3 reurns true or false
</script>

Element functions

  • "getDuration" returns duration of current file 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
alert(J('#myelementid').getDuration());
</script>
  • "getCurrentprz" returns percentage of playtime of current file (e.g. for Timelines) 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
alert(J('#myelementid').getCurrentprz());
</script>
  • "getCurrenttime" returns current time of current file (e.g. for Timelines) 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
alert(J('#myelementid').getCurrenttime());
</script>
  • "setCurrentTime" sets current time of current file (e.g. for Timelines) 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').setCurrentTime(100);
</script>
  • "setVolume" sets volume of current file. Unfortunately note for all devices 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').setVolume(30);
</script>
  • "newFile" loads a new mp3 file 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').newFile('mynewfile.mp3');
//or
J('#myelementid').newFile('mynewfile.mp3',true);
//for autoplay. Otherwise it will not play new file
</script>
  • "PLAY" play current file 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').PLAY();
//or
J('#myelementid').PLAY(50);
//to set time from where to play from (Not supported by all devices)
</script>
  • "STOP" stop current file 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').STOP();
</script>
  • "PAUSE" pause current file. If device supports, current time will setted to current pause time. Otherwise it's just a stop (currentTime(0)) 
    
 
<script type="text/javascript">
J('#myelementid').MP3({'file:myfile.mp3'});
J('#myelementid').PAUSE();
</script>

FUNCTION KEYS

  • add "playing:" [FUNCTION] to get current informations while playing.
    
 
<script type="text/javascript">
myelement.MP3({'file:myfile.mp3',playing:function(OBJECT){
		    //this is your element
		    alert(OBJECT.volume);
		 //Get current volume (0 - 100)
		    alert(OBJECT.prz);
		 //Get current percentage of played/duration (0 - 100)
		    alert(OBJECT.duration);
		 //Get duration of current file
		    alert(OBJECT.played);
		 //Get played time of current file
		}});
</script>
  • add "finish:" [FUNCTION] when current file has finished playing.
    
 
<script type="text/javascript">
myelement.MP3({'file:myfile.mp3',finish:function(){
		    alert(this+' audiofile is done');
		}});
</script>
  • add "isReady:" [FUNCTION] when current file is loaded and ready to play.
    
 
<script type="text/javascript">
myelement.MP3({'file:myfile.mp3',onReady:function(){
		    alert(this+' is ready to play');
		}});
</script>
  • add "onEnd:" [FUNCTION] when current file has finished playing.
    
 
<script type="text/javascript">
myelement.MP3({'file:myfile.mp3',onEnd:function(){
		    alert(this+' file has has finished playing');
		}});
</script>

Device support

  • Non mobiles: Due my testings all (Edge, Firefox, Opery, Chrome, Safari)
  • Mobiles: Due my testings all with restriction for some (as autoplay, setVolume, PLAY with time) For mobiles use a button to play (User interaction in general for best results)
I do my very best to improve and to get over all this mobile restrictions. Please be patient and come back frequently to check for updates.

Apologize my english

That's not my native language. But the domain is american-webdesign.com. Im not american at all. But i almost have only clients from USA. So this domain usually contains demonstration of progress for client's projects. Now that i have a better solution for that, this domain came superfluous. But there is no domain with "Jase" available and i don't want to buy one for a free project. So this domain came back again for Jase.
But there's a contact form. Please use it for any questions. I will answer within 24 hours.

Questions or Job offers

Click to open contactform

Like or share this page