Skip to content
Permalink
Browse files

Merge branch 'master' of https://github.com/pupunzi/jquery.mb.YTPlayer

# Conflicts:
#	bower.json
#	dist/index.html
#	dist/jquery.mb.YTPlayer.js
#	dist/jquery.mb.YTPlayer.min.js
#	package.json
  • Loading branch information...
pupunzi committed Mar 26, 2019
2 parents 30153b2 + 9f65de0 commit 78fe069e3d5342d04f5cb38142b4f2b100d67cf7
Showing with 113 additions and 67 deletions.
  1. +4 −4 README.md
  2. +1 −1 bower.json
  3. +3 −3 dist/index.html
  4. +74 −40 dist/jquery.mb.YTPlayer.js
  5. +2 −2 dist/jquery.mb.YTPlayer.min.js
  6. +13 −3 examples/test-3.html
  7. +1 −1 package.json
  8. +15 −13 src/jquery.mb.YTPlayer.src.js
@@ -6,12 +6,12 @@ __An open source jQuery component to easily build your custom Youtube® player o

![mb.YTPlayer](http://pupunzi.open-lab.com/wp-content/uploads/2010/06/DSC03762.jpg)

## [go to the demo](http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html)
## [go to the doc](http://wiki.github.com/pupunzi/jquery.mb.YTPlayer/)
## [go to the blog](http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-YTPlayer/)
## [go to the demo](https://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html)
## [go to the doc](https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
## [go to the blog](https://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-YTPlayer/)


[jquery.mb.components](http://pupunzi.com/), another way of thinking the web
[jquery.mb.components](https://pupunzi.com/), another way of thinking the web


## Now available also for **Vimeo**:
@@ -22,5 +22,5 @@
"test",
"tests"
],
"buildnum": "7415"
"buildnum": "7421"
}
@@ -4,7 +4,7 @@
file: index.tmpl
last modified: 10/25/18 8:00 PM
Version: 3.2.9
Build: 7415
Build: 7421
Open Lab s.r.l., Florence - Italy
email: matteo@open-lab.com
@@ -27,9 +27,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=7415" media="all" rel="stylesheet" type="text/css">
<link href="css/jquery.mb.YTPlayer.min.css?_bn=7421" media="all" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.mb.YTPlayer.js?_bn=7415"></script>
<script src="jquery.mb.YTPlayer.js?_bn=7421"></script>
<script src="../examples/assets/apikey.js"></script>
<style>
*:focus {
@@ -4,7 +4,7 @@
file: jquery.mb.YTPlayer.src.js
last modified: 11/2/18 7:23 PM
Version: 3.2.9
Build: 7415
Build: 7421
Open Lab s.r.l., Florence - Italy
email: matteo@open-lab.com
@@ -13,8 +13,8 @@
http://open-lab.com
Licences: MIT, GPL
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
https://www.opensource.org/licenses/mit-license.php
https://www.gnu.org/licenses/gpl.html
Copyright (c) 2001-2018. Matteo Bicocchi (Pupunzi)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@@ -61,7 +61,7 @@ function iOSversion() {
jQuery.mbYTPlayer = {
name : "jquery.mb.YTPlayer",
version: "3.2.9",
build : "7415",
build : "7421",
author : "Matteo Bicocchi (pupunzi)",
apiKey : "",

@@ -91,7 +91,7 @@ function iOSversion() {
fadeOnStartTime (int)
fade in timing at video start
*/
fadeOnStartTime: 1500,
fadeOnStartTime: 1000,

/**
startAt (int)
@@ -262,15 +262,13 @@ function iOSversion() {
onReady (function)
a callback function fired once the player is ready
*/
onReady: function (player) {
},
onReady: function (player) {},

/**
onReady (function)
a callback function fired if there's an error
*/
onError: function (player, err) {
}
onError: function (player, err) {}
},
/**
* @fontface icons
@@ -311,8 +309,8 @@ function iOSversion() {

if (!ytp.YTAPIReady && typeof window.YT === 'undefined') {
jQuery("#YTAPI").remove();
var tag = jQuery("<script></script>").attr({
"src": jQuery.mbYTPlayer.locationProtocol + "//www.youtube.com/iframe_api?v=" + jQuery.mbYTPlayer.version,
var tag = jQuery("<script>").attr({
"src": "https://www.youtube.com/iframe_api?v=" + jQuery.mbYTPlayer.version,
"id" : "YTAPI"
});
jQuery("head").prepend(tag);
@@ -332,6 +330,8 @@ function iOSversion() {
}
return isIfr;
};



//console.time( "YTPlayerInit" );

@@ -404,7 +404,6 @@ function iOSversion() {
YTPlayer.opt.coverImage = YTPlayer.opt.coverImage || YTPlayer.opt.backgroundImage;

/**
* todo: remove
Manage Opacity for IE < 10
*/
if (jQuery.mbBrowser.msie && jQuery.mbBrowser.version < 9)
@@ -469,14 +468,17 @@ function iOSversion() {
height : "100%"
}).addClass("YTPOverlay");

if (YTPlayer.opt.coverImage || YTPlayer.orig_containment_background) {
if (YTPlayer.opt.coverImage || YTPlayer.orig_containment_background != "none") {
// if (YTPlayer.isPlayer && !YTPlayer.opt.autoPlay) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;

YTPlayer.opt.containment.css({
background : bgndURL,
backgroundColor : "#000",
backgroundSize : "cover",
backgroundRepeat: "no-repeat"
});

}

/**
@@ -901,8 +903,28 @@ function iOSversion() {
*/
getDataFromAPI: function (YTPlayer) {

//console.debug("getDataFromAPI", YTPlayer.id, YTPlayer.videoID)

YTPlayer.videoData = jQuery.mbStorage.get("YTPlayer_data_" + YTPlayer.videoID);
/*
jQuery(YTPlayer).off("YTPData.YTPlayer").on("YTPData.YTPlayer", function () {
if (YTPlayer.hasData) {
if (YTPlayer.opt.coverImage || YTPlayer.orig_containment_background != "none") {
// if (YTPlayer.isPlayer && !YTPlayer.opt.autoPlay) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.opt.containment.css({
background: bgndURL,
backgroundColor: "#000",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
});
}
}
});
*/

if (YTPlayer.videoData) {

setTimeout(function () {
YTPlayer.dataReceived = true;

@@ -928,7 +950,7 @@ function iOSversion() {
* Get video info from API3 (needs api key)
* snippet,player,contentDetails,statistics,status
*/
jQuery.getJSON(jQuery.mbYTPlayer.locationProtocol + "//www.googleapis.com/youtube/v3/videos?id=" + YTPlayer.videoID + "&key=" + jQuery.mbYTPlayer.apiKey + "&part=snippet", function (data) {
jQuery.getJSON("https://www.googleapis.com/youtube/v3/videos?id=" + YTPlayer.videoID + "&key=" + jQuery.mbYTPlayer.apiKey + "&part=snippet", function (data) {
YTPlayer.dataReceived = true;

var YTPChanged = jQuery.Event("YTPChanged");
@@ -970,6 +992,21 @@ function iOSversion() {
YTPChanged.videoId = YTPlayer.videoID;
jQuery(YTPlayer).trigger(YTPChanged);
}, 10);

/*
if (!YTPlayer.opt.autoPlay) {
// if (YTPlayer.isPlayer && !YTPlayer.opt.autoPlay) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
if (bgndURL) {
YTPlayer.opt.containment.css({
background: bgndURL,
backgroundSize: "cover"
});
}
}
*/
YTPlayer.videoData = null;

}
@@ -1108,7 +1145,7 @@ function iOSversion() {
}

if (typeof callback == "function")
jQuery(YTPlayer).one("YTPChanged", function () {
jQuery(YTPlayer).on("YTPChanged", function () {
callback(YTPlayer);
});

@@ -2030,7 +2067,7 @@ function iOSversion() {
* */
var idx = jQuery("<span/>").addClass("mb_YTPTime");
var vURL = YTPlayer.opt.videoURL ? YTPlayer.opt.videoURL : "";
if (vURL.indexOf("http") < 0) vURL = jQuery.mbYTPlayer.locationProtocol + "//www.youtube.com/watch?v=" + YTPlayer.opt.videoURL;
if (vURL.indexOf("http") < 0) vURL = "https://www.youtube.com/watch?v=" + YTPlayer.opt.videoURL;
var movieUrl = jQuery("<span/>").html(jQuery.mbYTPlayer.controls.ytLogo).addClass("mb_YTPUrl ytpicon").attr("title", "view on YouTube").on("click", function () {
window.open(vURL, "viewOnYT")
});
@@ -2133,6 +2170,7 @@ function iOSversion() {

var stopAt = YTPlayer.opt.stopAt > YTPlayer.opt.startAt ? YTPlayer.opt.stopAt : 0;
stopAt = stopAt < YTPlayer.player.getDuration() ? stopAt : 0;

if (YTPlayer.currentTime != prog.currentTime) {
var YTPEvent = jQuery.Event("YTPTime");
YTPEvent.time = YTPlayer.currentTime;
@@ -2194,12 +2232,13 @@ function iOSversion() {
YTPlayer.volumeBar.updateSliderVal(YTPlayer.opt.vol);
}
// the video is ended
if (YTPlayer.player.getPlayerState() > 0 && ((parseFloat(YTPlayer.player.getDuration() - .5) < YTPlayer.player.getCurrentTime()) || (stopAt > 0 && parseFloat(YTPlayer.player.getCurrentTime()) > stopAt))) {
if (YTPlayer.player.getPlayerState() > 0 && ((parseFloat(YTPlayer.player.getDuration() - (YTPlayer.opt.fadeOnStartTime / 1000)) < YTPlayer.player.getCurrentTime()) || (stopAt > 0 && parseFloat(YTPlayer.player.getCurrentTime()) >= stopAt))) {

if (YTPlayer.isEnded)
return;

YTPlayer.isEnded = true;

setTimeout(function () {
YTPlayer.isEnded = false
}, 1000);
@@ -2218,13 +2257,12 @@ function iOSversion() {

YTPlayer.state = 2;

if(YTPlayer.opt.coverImage || YTPlayer.orig_containment_background) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.opt.containment.css({
background : bgndURL,
backgroundSize: "cover"
});
}
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;

YTPlayer.opt.containment.css({
background : bgndURL,
backgroundSize: "cover"
});

jQuery(YTPlayer).YTPPause();
YTPlayer.wrapper.CSSAnimate({
@@ -2238,14 +2276,12 @@ function iOSversion() {
YTPEnd.time = YTPlayer.currentTime;
jQuery(YTPlayer).trigger(YTPEnd);
YTPlayer.player.seekTo(YTPlayer.opt.startAt, true);

if(YTPlayer.opt.coverImage || YTPlayer.orig_containment_background) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.opt.containment.css({
background : bgndURL,
backgroundSize: "cover"
});
}

var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.opt.containment.css({
background : bgndURL,
backgroundSize: "cover"
});

});
return;
@@ -2405,14 +2441,12 @@ function iOSversion() {
} else {
YTPlayer.wrapper.css({opacity: 0});
setTimeout(function () {
if(YTPlayer.opt.coverImage || YTPlayer.orig_containment_background) {
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.wrapper.css({
background : bgndURL,
backgroundSize : "cover",
backgroundRepeat: "no-repeat"
})
}
var bgndURL = YTPlayer.opt.coverImage ? "url(" + YTPlayer.opt.coverImage + ") center center" : YTPlayer.orig_containment_background;
YTPlayer.wrapper.css({
background : bgndURL,
backgroundSize : "cover",
backgroundRepeat: "no-repeat"
})
}, YTPlayer.opt.fadeOnStartTime)
}
}

Large diffs are not rendered by default.

@@ -26,9 +26,11 @@

<link href='https://fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'>
<link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.mb.ytplayer@3.2.9/dist/css/jquery.mb.YTPlayer.min.css">-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../dist/jquery.mb.YTPlayer.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery.mb.ytplayer@3.2.9/dist/jquery.mb.YTPlayer.min.js"></script>-->
<script src="assets/apikey.js"></script>

<style>
@@ -56,14 +58,22 @@
<body>
<!--<div class="playerBox" id="v1" style="background: #7698c6;"></div>-->

<div id="wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Zry1ilxCmvA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div id="wrapper" style="height: 50vh">

</div>
<!--https://www.youtube.com/watch?v=Zry1ilxCmvA-->
<div id="p1" class="player" data-property="{videoURL:'qRSPVj1ldVQ', ratio:16/9, abundance:.3, anchor:'center,center', containment:'body', showControls:true, autoPlay:true, loop:true, mute:true, opacity:1, addRaster:true, quality:'default'}"></div>

<script>
jQuery(".player").YTPlayer();
//jQuery(".player").YTPlayer();
var videos = [{ videoURL:'koxqaR1YtJE', containment:'#wrapper', showControls:true, startAt: 0, autoPlay:true, loop:false , mute:true, opacity:1}, { videoURL:'EzKImzjwGyM', containment:'#wrapper', showControls:false, startAt: 0, autoPlay:true, loop:false , mute:true, opacity:1 }]
jQuery(".player").YTPlaylist(videos, false, function(video){
console.log('Video changed', video.videoData);
console.log('Video:',video.id, video.opt);
});
</script>
</body>
</html>
@@ -51,5 +51,5 @@
"directories": {
"example": "examples"
},
"buildnum": "7415"
"buildnum": "7421"
}

0 comments on commit 78fe069

Please sign in to comment.
You can’t perform that action at this time.