Skip to content

Instantly share code, notes, and snippets.

@tallesairan

tallesairan/index.html

Created November 26, 2014 17:55
Show Gist options
  • Save tallesairan/b8136d380122a6ead8eb to your computer and use it in GitHub Desktop.
Save tallesairan/b8136d380122a6ead8eb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://www.youtube.com/iframe_api"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#box {
width:100%; height:500px;
overflow:hidden;
}
#player{
margin-top:-23px
}
.buttons
{
float:left;
margin:0;
position:absolute;
top: 1;
overflow:hidden;
height:120px;
bottom:0;
left:0;
right:0;
border:none;
border-radius:0px;
}
</style>
</head>
<body>
<div id="video">
<div id="box">
<div id="player" ></div>
<div class="buttons well well-sm">
<button class="btn btn-success" id="play-button" type="button">Play</button>
<button class="btn btn-danger" id="pause-button" type="button">Pausar</button>
<br></br>
<span>Tempo <b> <span id="talles" class="label label-danger"></span></b></span><br>Duração <span class="label label-primary"> <b> <script type="text/javascript">
function youtubeFeedCallback(json){
var totalSec = json["data"]["duration"];
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var result = (hours < 1 ? "" : hours + ":") + (minutes < 1 ? "0" : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.write(result);
}
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/HoMzLLWNV1g?v=2&alt=jsonc&callback=youtubeFeedCallback&prettyprint=true"></script></b></span><br>
</div>
</div>
</div>
</div>
<!-- 'file': 'http://www.youtube.com/v/xmADpBu_ZCA&hl=en_US&fs=0&rel=0&hd=1&loop=1&showinfo=1&cc_load_policy=1&showsearch=1&showinfo=0&iv_load_policy=3&modestbranding=0&nologo=1', /MYSTREAMSERVICE.COM EMBED PLAYER -->
<script id="jsbin-javascript">
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "530",
width: '100%',
videoId: "HoMzLLWNV1g",
playerVars: {
autoplay: 1,
controls: 0,
rel: 0,
fs: 0,
modestbranding: 1,
showinfo: 1,
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
function onPlayerStateChange(e) {
e.data = YT.PlayerState.PLAYING;
}
setInterval(function(event){
var tinnerText = document.getElementById("talles");
var playe = player.getCurrentTime();
var momento = numeral(playe).format('0:0');
tinnerText.innerText = momento;
},10);
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
function stopVideo() {
player.stopVideo();
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//www.youtube.com/iframe_api"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"><\/script>
<\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<\!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<\!-- Latest compiled and minified JavaScript -->
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="video">
<div id="box">
<div id="player" ></div>
<div class="buttons well well-sm">
<button class="btn btn-success" id="play-button" type="button">Play</button>
<button class="btn btn-danger" id="pause-button" type="button">Pausar</button>
<br></br>
<span>Tempo <b> <span id="talles" class="label label-danger"></span></b></span><br>Duração <span class="label label-primary"> <b> <script type="text/javascript">
function youtubeFeedCallback(json){
var totalSec = json["data"]["duration"];
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var result = (hours < 1 ? "" : hours + ":") + (minutes < 1 ? "0" : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.write(result);
}
<\/script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/HoMzLLWNV1g?v=2&alt=jsonc&callback=youtubeFeedCallback&prettyprint=true"><\/script></b></span><br>
</div>
</div>
</div>
</div>
<\!-- 'file': 'http://www.youtube.com/v/xmADpBu_ZCA&hl=en_US&fs=0&rel=0&hd=1&loop=1&showinfo=1&cc_load_policy=1&showsearch=1&showinfo=0&iv_load_policy=3&modestbranding=0&nologo=1', /MYSTREAMSERVICE.COM EMBED PLAYER -->
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#box {
width:100%; height:500px;
overflow:hidden;
}
#player{
margin-top:-23px
}
.buttons
{
float:left;
margin:0;
position:absolute;
top: 1;
overflow:hidden;
height:120px;
bottom:0;
left:0;
right:0;
border:none;
border-radius:0px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "530",
width: '100%',
videoId: "HoMzLLWNV1g",
playerVars: {
autoplay: 1,
controls: 0,
rel: 0,
fs: 0,
modestbranding: 1,
showinfo: 1,
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
function onPlayerStateChange(e) {
e.data = YT.PlayerState.PLAYING;
}
setInterval(function(event){
var tinnerText = document.getElementById("talles");
var playe = player.getCurrentTime();
var momento = numeral(playe).format('0:0');
tinnerText.innerText = momento;
},10);
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
function stopVideo() {
player.stopVideo();
}
}
</script></body>
</html>
Raw
jsbin.sororapigo.css
#box {
width:100%; height:500px;
overflow:hidden;
}
#player{
margin-top:-23px
}
.buttons
{
float:left;
margin:0;
position:absolute;
top: 1;
overflow:hidden;
height:120px;
bottom:0;
left:0;
right:0;
border:none;
border-radius:0px;
}
Raw
jsbin.sororapigo.js
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "530",
width: '100%',
videoId: "HoMzLLWNV1g",
playerVars: {
autoplay: 1,
controls: 0,
rel: 0,
fs: 0,
modestbranding: 1,
showinfo: 1,
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
function onPlayerStateChange(e) {
e.data = YT.PlayerState.PLAYING;
}
setInterval(function(event){
var tinnerText = document.getElementById("talles");
var playe = player.getCurrentTime();
var momento = numeral(playe).format('0:0');
tinnerText.innerText = momento;
},10);
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
function stopVideo() {
player.stopVideo();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment