jquery.mb.ytplayer
Version:
This plugin let you play any public YouTube video as background of your page. It can also be used as a customized player in page.
261 lines (215 loc) • 9.46 kB
HTML
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jquery.mb.components
file: demo_multiple_videos.html
last modified: 10/25/18 8:00 PM
Version: {{ version }}
Build: {{ buildnum }}
Open Lab s.r.l., Florence - Italy
email: matteo@open-lab.com
blog: http://pupunzi.open-lab.com
site: http://pupunzi.com
http://open-lab.com
Licences: MIT, GPL
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Copyright (c) 2001-2018. Matteo Bicocchi (Pupunzi)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
<html>
<head>
<meta charset="UTF-8">
<title>youtube Chromeless Player - mb.YTPlayer</title>
<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">
<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="assets/apikey.js"></script>
<style>
body {
border: none;
margin: 0;
padding: 30px;
background: #003e50;
font: normal 16px/20px Lekton, sans-serif;
}
h1,
h2 {
font-family: 'Lobster', cursive;
font-size: 40px;
text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.30);
font-weight: 200;
}
#wrapper {
padding-top: 80px;
}
#console {
position: fixed;
width: 350px;
padding: 5px;
height: 100%;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
overflow: auto;
color: #fff;
font-size: 13px;
}
.dida {
color: #fff;
font-size: 22px;
}
button {
display: block;
background: transparent;
border: none;
color: white;
font: normal 16px/20px Lekton, sans-serif;
cursor: pointer;
}
button:hover,
button.sel {
color: #ffcc00;
}
button.command {
padding: 5px;
font-size: 16px;
display: inline-block;
background: #000;
color: #fff;
line-height: 30px;
margin: 3px;
border: none;
border-radius: 10px;
}
#wp {
position: fixed;
z-index: 10;
min-width: 300px;
background: rgba(0, 0, 0, 0.55);
/*background: #ffb200;*/
color: #fff;
font-size: 24px;
line-height: 24px;
padding: 20px;
bottom: 60px;
cursor: pointer;
text-align: left;
border-radius: 10px;
font-family: 'Lobster', cursive;
}
#wp:hover {
background: #000000;
}
#wp img {
width: 60px;
margin-right: 20px;
}
</style>
<script type="text/javascript">
var myPlayer;
jQuery(function () {
jQuery("button").not(".command").click(function () {
jQuery("button").not(".command").removeClass("sel");
jQuery(this).addClass("sel");
});
myPlayer = jQuery("#bgndVideo").YTPlayer({
onReady: function (player) {
YTPConsole.append(player.id + " player is ready");
YTPConsole.append("<br>");
}
});
/* DEBUG ******************************************************************************************/
var YTPConsole = jQuery("#eventListener");
// EVENT: YTPStart YTPEnd YTPLoop YTPPause YTPBuffering
myPlayer.on("YTPStart YTPEnd YTPLoop YTPPause YTPBuffering", function (e) {
YTPConsole.append("event type:: " + e.type + " - " + jQuery("#bgndVideo").YTPGetPlayer().getPlayerState() + " - time: " + e.time);
YTPConsole.append("<br>");
});
// EVENT: YTPChanged clear the console
myPlayer.on("YTPChanged", function () {
YTPConsole.html("");
});
function printOutObj(obj) {
for (var x in obj) {
if (typeof obj[x] == "object") {
printOutObj(obj[x]);
YTPConsole.append("<br>");
continue;
}
YTPConsole.append("<br>");
YTPConsole.append(x + ":: " + obj[x]);
}
}
// EVENT: YTPData
myPlayer.on("YTPData", function (e) {
YTPConsole.append("******************************");
YTPConsole.append("<br>");
YTPConsole.append("Available data for the video ID " + e.prop.id + ":");
YTPConsole.append("<br>");
YTPConsole.append("event type:: " + e.type);
printOutObj(e.prop);
YTPConsole.append("<br>");
YTPConsole.append("******************************");
YTPConsole.append("<br>");
console.debug(e.prop);
$(".dida").html(e.prop.title + "<br>via " + e.prop.channelTitle);
});
// EVENT: YTPTime fired each second
myPlayer.on("YTPTime", function (e) {
var currentTime = e.time;
var traceLog = currentTime / 5 == Math.floor(currentTime / 5);
if (traceLog) {
YTPConsole.append("event type:: " + e.type + " actual time is: " + currentTime);
YTPConsole.append("<br>");
}
});
/* DEBUG END ******************************************************************************************/
});
</script>
</head>
<body>
<div id="wrapper">
<a href='https://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='https://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>
<h1>jQuery.mb.YTPlayer as background</h1>
<div class="actions">
<button class="command" onclick="jQuery('#bgndVideo').YTPPlay()"> play </button>
<button class="command" onclick="jQuery('#bgndVideo').YTPPause()"> pause </button>
<button class="command" onclick="jQuery('#bgndVideo').toggleVolume()"> toggle volume </button>
<button class="command" onclick="alert(jQuery('#bgndVideo').YTPGetPlayer().getPlaybackQuality())"> quality </button>
<button class="command" onclick="jQuery('#console').toggle()"> show/hide the console</button>
<br>
<br> Video info from the YT feed:
<div class="dida"></div>
<br>
<br>
<h2>Choose the video to play</h2>
<button class="sel" onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'http://www.youtube.com/watch?v=mAf6zKRb1wI'})">
vito acconci theme song 1973 </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'dZaD9CHZecE',ratio:'4/3'})"> Vito Acconci - Undertone 1972 (extract) </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'https://youtu.be/3ovA7zeviRo',ratio:'4/3'})"> Dan Graham - Body Press, 1972 </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'https://www.youtube.com/watch?v=z5krhw54oqs',ratio:'4/3'})">
Fluxus - Wolf Vostell - Sun in your head </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'https://www.youtube.com/watch?v=u9k1FaMIYTs', addRaster:false})">
nam june paik - 03 </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'https://www.youtube.com/watch?v=VuaJAgx0x_4'})"> nam june paik </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'https://www.youtube.com/watch?v=rkfOgavdhak',ratio:'4/3'})">
Bruce Nauman - Pinch Neck 1968 </button>
<button onclick="jQuery('#bgndVideo').YTPChangeVideo({videoURL:'http://www.youtube.com/watch?v=UJQmV8aPNao'})"> Bill Viola - Acceptance, 2008 </button>
</div>
<a id="bgndVideo" data-property="{videoURL:'http://www.youtube.com/watch?v=mAf6zKRb1wI',containment:'body',autoPlay:true,loop:false,mute:true,startAt:550,opacity:1,ratio:'4/3',addRaster:true}">My video</a>
<a style="position: fixed;bottom:40px;right: 30px;" href="http://pupunzi.open-lab.com/consider-a-donation/" target="_blank">
<img border="0" alt="PayPal" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" class="alignright">
</a>
</div>
<div id="console" style="display: none">
<span style="font-size: 18px;">EVENT CONSOLE: </span>
<div id="eventListener"></div>
</div>
<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>
</div>
</body>
</html>