Skip to content

Commit

Permalink
mobile compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@pupunzi
pupunzi committed Sep 29, 2017
1 parent 2ec13bd commit 0af6eb6
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 120 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@
"test",
"tests"
],
"buildnum": "6369"
"buildnum": "6396"
}
4 changes: 2 additions & 2 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
<meta charset="UTF-8">
<title>youtube Chromeless Player - mb.YTPlayer</title>
<link href='//fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'>
<link href="css/jquery.mb.YTPlayer.min.css?_bn=6369" media="all" rel="stylesheet" type="text/css">
<link href="css/jquery.mb.YTPlayer.min.css?_bn=6396" media="all" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.mb.YTPlayer.js?_bn=6369"></script>
<script src="jquery.mb.YTPlayer.js?_bn=6396"></script>
<script src="../examples/assets/apikey.js"></script>
<style>
*:focus {
Expand Down
158 changes: 101 additions & 57 deletions dist/jquery.mb.YTPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ var getYTPVideoID = function( url ) {
jQuery.mbYTPlayer = {
name: "jquery.mb.YTPlayer",
version: "3.1.0",
build: "6369",
build: "6396",
author: "Matteo Bicocchi (pupunzi)",
apiKey: "",
defaults: {
Expand Down Expand Up @@ -216,7 +216,7 @@ var getYTPVideoID = function( url ) {
jQuery.mbCookie.remove( "YTPlayer_start_from" + YTPlayer.videoID );
}

// YTPlayer.canPlayOnMobile = isPlayer && jQuery( this ).children().length === 0;
// YTPlayer.canPlayOnMobile = isPlayer && jQuery( this ).children().length === 0;

YTPlayer.canPlayOnMobile = jQuery.mbBrowser.mobile && ( 'playsInline' in document.createElement( 'video' ) );

Expand Down Expand Up @@ -246,7 +246,6 @@ var getYTPVideoID = function( url ) {
'mute': jQuery.browser.mobile ? 1 : 0
};


if( document.createElement( 'video' ).canPlayType ) jQuery.extend( playerVars, {
'html5': 1
} );
Expand Down Expand Up @@ -302,7 +301,7 @@ var getYTPVideoID = function( url ) {
opacity: 0
} );

var playerBox = jQuery( "<div/>" ).attr( "id", playerID ).addClass( "playerBox" );
var playerBox = jQuery( "<div/>" ).attr( "id", playerID ).addClass( "mbYTP_playerBox" );
playerBox.css( {
position: "absolute",
zIndex: 0,
Expand Down Expand Up @@ -927,9 +926,11 @@ var getYTPVideoID = function( url ) {
fullScreenBtn.html( jQuery.mbYTPlayer.controls.onlyYT );
jQuery( YTPlayer ).YTPSetVideoQuality( YTPlayer.opt.quality );
videoWrapper.removeClass( "YTPFullscreen" );

videoWrapper.CSSAnimate( {
opacity: YTPlayer.opt.opacity
}, YTPlayer.opt.fadeOnStartTime );

videoWrapper.css( {
zIndex: 0
} );
Expand Down Expand Up @@ -960,20 +961,26 @@ var getYTPVideoID = function( url ) {
clearTimeout( YTPlayer.hideCursor );
if( !jQuery( e.target ).parents().is( ".mb_YTPBar" ) ) YTPlayer.hideCursor = setTimeout( hideMouse, 3000 );
} );

hideMouse();

if( real ) {
videoWrapper.css( {
opacity: 0
} );
videoWrapper.addClass( "YTPFullscreen" );
launchFullscreen( videoWrapper.get( 0 ) );

setTimeout( function() {

videoWrapper.CSSAnimate( {
opacity: 1
}, YTPlayer.opt.fadeOnStartTime * 2 );

YTPlayer.wrapper.append( controls );
jQuery( YTPlayer ).optimizeDisplay();
YTPlayer.player.seekTo( YTPlayer.player.getCurrentTime() + .1, true );

}, YTPlayer.opt.fadeOnStartTime )
} else videoWrapper.css( {
zIndex: 10000
Expand Down Expand Up @@ -1066,14 +1073,17 @@ var getYTPVideoID = function( url ) {
return this;

YTPlayer.player.playVideo();

YTPlayer.wrapper.CSSAnimate( {
opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity
}, YTPlayer.opt.fadeOnStartTime * 4 );
}, YTPlayer.opt.fadeOnStartTime );


jQuery( YTPlayer.playerEl ).CSSAnimate( {
opacity: 1
}, YTPlayer.opt.fadeOnStartTime * 2 );


var controls = jQuery( "#controlBar_" + YTPlayer.id );
var playBtn = controls.find( ".mb_YTPPlaypause" );
playBtn.html( jQuery.mbYTPlayer.controls.pause );
Expand Down Expand Up @@ -1148,10 +1158,13 @@ var getYTPVideoID = function( url ) {
*/
setVolume: function( val ) {
var YTPlayer = this.get( 0 );
if( !val && !YTPlayer.opt.vol && YTPlayer.player.getVolume() == 0 ) jQuery( YTPlayer ).YTPUnmute();
if( !val && !YTPlayer.opt.vol && YTPlayer.player.getVolume() == 0 )
jQuery( YTPlayer ).YTPUnmute();
else if( ( !val && YTPlayer.player.getVolume() > 0 ) || ( val && YTPlayer.opt.vol == val ) ) {
if( !YTPlayer.isMute ) jQuery( YTPlayer ).YTPMute();
else jQuery( YTPlayer ).YTPUnmute();
if( !YTPlayer.isMute )
jQuery( YTPlayer ).YTPMute();
else
jQuery( YTPlayer ).YTPUnmute();
} else {
YTPlayer.opt.vol = val;
YTPlayer.player.setVolume( YTPlayer.opt.vol );
Expand Down Expand Up @@ -1514,6 +1527,10 @@ var getYTPVideoID = function( url ) {
return this;
},

/****************************************************************
* CONTROLS
*/

/**
* manageProgress
*
Expand Down Expand Up @@ -1637,6 +1654,10 @@ var getYTPVideoID = function( url ) {
} );
},

/****************************************************************
* MANAGE PLAYER STATE
*/

/**
* checkForState
*
Expand Down Expand Up @@ -1709,9 +1730,9 @@ var getYTPVideoID = function( url ) {
$YTPlayer.YTPPause();

/*
console.debug( YTPlayer.id, isOnScreen )
console.debug( YTPlayer.state )
*/
console.debug( YTPlayer.id, isOnScreen )
console.debug( YTPlayer.state )
*/

} else if( !YTPlayer.hasFocus && !( YTPlayer.state == -1 || YTPlayer.state == 0 ) ) {

Expand All @@ -1721,7 +1742,6 @@ var getYTPVideoID = function( url ) {
}
}


if( YTPlayer.controlBar.length && YTPlayer.controlBar.outerWidth() <= 400 && !YTPlayer.isCompact ) {
YTPlayer.controlBar.addClass( "compact" );
YTPlayer.isCompact = true;
Expand Down Expand Up @@ -1802,26 +1822,6 @@ var getYTPVideoID = function( url ) {
}, interval );
},

/**
* getTime
*
* @returns {string} time
*/
getTime: function() {
var YTPlayer = this.get( 0 );
return jQuery.mbYTPlayer.formatTime( YTPlayer.currentTime );
},

/**
* getTotalTime
*
* @returns {string} total time
*/
getTotalTime: function() {
var YTPlayer = this.get( 0 );
return jQuery.mbYTPlayer.formatTime( YTPlayer.totalTime );
},

/**
* checkForStart
*
Expand All @@ -1841,9 +1841,9 @@ var getYTPVideoID = function( url ) {
YTPlayer.state = 2;

/*
jQuery( YTPlayer ).YTPPlay();
jQuery( YTPlayer ).YTPPause();
*/
jQuery( YTPlayer ).YTPPlay();
jQuery( YTPlayer ).YTPPause();
*/

jQuery( YTPlayer ).muteYTPVolume();
jQuery( "#controlBar_" + YTPlayer.id ).remove();
Expand Down Expand Up @@ -1917,20 +1917,23 @@ var getYTPVideoID = function( url ) {

if( YTPlayer.opt.autoPlay ) {

$YTPlayer.YTPPlay();

var YTPStart = jQuery.Event( "YTPStart" );
YTPStart.time = YTPlayer.currentTime;
jQuery( YTPlayer ).trigger( YTPStart );

jQuery( YTPlayer.playerEl ).CSSAnimate( {
opacity: 1
}, 1000 );
/*
jQuery( YTPlayer.playerEl ).css( {
opacity: 1
} );
YTPlayer.wrapper.CSSAnimate( {
opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity
}, YTPlayer.opt.fadeOnStartTime * 2 );
YTPlayer.wrapper.CSSAnimate( {
opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity
}, YTPlayer.opt.fadeOnStartTime * 2 );
*/

//$YTPlayer.YTPPlay();
YTPlayer.player.playVideo();
//YTPlayer.player.playVideo();

// Fix for Safari freeze

Expand All @@ -1943,13 +1946,14 @@ var getYTPVideoID = function( url ) {
clearInterval( YTPlayer.safariPlay )
}, 10 )
}
$YTPlayer.one( "YTPReady", function() {
$YTPlayer.YTPPlay();
} );

} else {
/*
$YTPlayer.one( "YTPReady", function() {
$YTPlayer.YTPPlay();
} );
*/

//YTPlayer.player.playVideo();
} else {

setTimeout( function() {

Expand Down Expand Up @@ -1999,24 +2003,28 @@ var getYTPVideoID = function( url ) {

},

/****************************************************************
* UTILITIES
*/

/**
* setAnchor
* getTime
*
* @param anchor
* @returns {string} time
*/
setAnchor: function( anchor ) {
var $YTplayer = this;
$YTplayer.optimizeDisplay( anchor );
getTime: function() {
var YTPlayer = this.get( 0 );
return jQuery.mbYTPlayer.formatTime( YTPlayer.currentTime );
},

/**
* getAnchor
* getTotalTime
*
* @param anchor
* @returns {string} total time
*/
getAnchor: function() {
getTotalTime: function() {
var YTPlayer = this.get( 0 );
return YTPlayer.opt.anchor;
return jQuery.mbYTPlayer.formatTime( YTPlayer.totalTime );
},

/**
Expand All @@ -2029,10 +2037,35 @@ var getYTPVideoID = function( url ) {
var min = Math.floor( s / 60 );
var sec = Math.floor( s - ( 60 * min ) );
return( min <= 9 ? "0" + min : min ) + " : " + ( sec <= 9 ? "0" + sec : sec );
},

/****************************************************************
* PLAYER POSITION
*/

/**
* setAnchor
*
* @param anchor
*/
setAnchor: function( anchor ) {
var $YTplayer = this;
$YTplayer.optimizeDisplay( anchor );
},

/**
* getAnchor
*
* @param anchor
*/
getAnchor: function() {
var YTPlayer = this.get( 0 );
return YTPlayer.opt.anchor;
}
};

/**
* optimizeDisplay
*
* @param anchor
* can be center, top, bottom, right, left; (default is center,center)
Expand Down Expand Up @@ -2125,7 +2158,9 @@ var getYTPVideoID = function( url ) {
} );

};

/**
* shuffle
*
* @param arr
* @returns {Array|string|Blob|*}
Expand All @@ -2144,6 +2179,11 @@ var getYTPVideoID = function( url ) {
return newArray;
};

/**
* Unselectable
*
* @returns {*}
*/
jQuery.fn.unselectable = function() {
return this.each( function() {
jQuery( this ).css( {
Expand All @@ -2154,6 +2194,10 @@ var getYTPVideoID = function( url ) {
} );
};

/****************************************************************
* EXTERNAL METHODS
*/

/* Exposed public method */
jQuery.fn.YTPlayer = jQuery.mbYTPlayer.buildPlayer;
jQuery.fn.YTPGetPlayer = jQuery.mbYTPlayer.getPlayer;
Expand Down
6 changes: 3 additions & 3 deletions dist/jquery.mb.YTPlayer.min.js
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions examples/demo_ext_methods.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ <h2 style="color:white">Available controls methods</h2>
</a>

<!--7SnmCUwOsts-->
<a id="bgndVideo" class="player" data-property="{videoURL:'r1xohS2u69E',containment:'body', showControls:true, autoPlay:true, loop:true, vol:50, mute:true, startAt:0, stopAt:166, opacity:1, addRaster:true, quality:'hd720', optimizeDisplay:true}">My video</a> <!--BsekcY04xvQ-->
<a id="bgndVideo" class="player" data-property="{videoURL:'r1xohS2u69E',containment:'body', showControls:true, autoPlay:true, loop:true, vol:50, mute:true, startAt:0, stopAt:150, opacity:1, addRaster:true, quality:'hd720', optimizeDisplay:true}">My video</a> <!--BsekcY04xvQ-->

</div>

Expand All @@ -188,7 +188,8 @@ <h2 style="color:white">Available controls methods</h2>
font-size: 24px;
line-height: 24px;
padding: 20px;
bottom:60px;
top:130px;
left: 30px;
cursor: pointer;
text-align: left;
border-radius: 10px;
Expand All @@ -204,6 +205,7 @@ <h2 style="color:white">Available controls methods</h2>
margin-right: 20px;
}
</style>

<div id="wp" onclick="self.location.href='https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL'">
<img src="https://pupunzi.com/wpPlus/images/YTPL.svg" style="float: left">
<span>Get the <br><b>Wordpress</b> Plug-in!</span>
Expand Down
Loading

0 comments on commit 0af6eb6

Please sign in to comment.