Skip to content

Instantly share code, notes, and snippets.

@Joseph7451797

Joseph7451797/YTPlayer.css

Last active March 16, 2016 14:55
Show Gist options
  • Save Joseph7451797/ddcd60697ab6ab928087 to your computer and use it in GitHub Desktop.
Save Joseph7451797/ddcd60697ab6ab928087 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/pegoci
Raw
YTPlayer.css
div {
display: block;
}
Raw
YTPlayer.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
div {
display: block;
}
</style>
</head>
<body>
<div id="youtube-container"></div>
<div>
<!-- <div id="video1"></div>
<div id="video2"></div> -->
<!-- <button class="btn" value="ssS" onclick=""></button> -->
<iframe id="you1" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/KrRW51FS1V4?enablejsapi=1" style="height: 360; width:640;"></iframe>
</div>
<div>
<iframe id="you2" width="640" height="360" src="https://www.youtube.com/embed/3qvrKJA8Obs?enablejsapi=1" frameborder="0" allowfullscreen></iframe></iframe>
</div>
<script id="jsbin-javascript">
$(document).ready(function(){
//ajax 抓取 youtubelist json 資料
var getYoutubeList = function(){
var jqx = $.ajax({
method: "GET",
url: "https://dl.dropboxusercontent.com/u/43833728/youtube-list.json",
dataType: "json"
});
jqx.done(function(result){
showYoutubeList(result);
}).fail(function(result){
console.log("youtube list load error!!");
});
};
getYoutubeList();
//呈現 youtube iframe
var showYoutubeList = function(result) {
var dataLength = result.length,
container = $("#youtube-container");
for(i = 0; i < dataLength; i++) {
container.append(
'<iframe class="' + result[i].id +'" id="'+ result[i].id +'" class="youtubeframe" src="https://www.youtube.com/embed/'+ result[i].youtube_id + '?enablejsapi=1" frameborder="0" allowfullscreen></iframe>');
}
};
});
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// on 事件
$(window).on("load", onYouTubeIframeAPIReady);
// 一個綁定u2物件的函數
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video2', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video3', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready. Uncomment the below code to start video when ready
function onPlayerReady(event) {
//event.target.playVideo();
}
function onPlayerStateChange(event) {
var lastAction="";
switch (event.data){
case YT.PlayerState.PLAYING:
if (lastAction != 'paused'){
console.log("play!");
// ga('send', 'event','video', 'Playing', 'youTubePlayer');
}
else{
lastAction = '';
}
break;
case YT.PlayerState.ENDED:
console.log("ended!");
// _gaq.push(['_trackEvent','video', 'Completed',getPercentage()]);
break;
case YT.PlayerState.PAUSED:
if (lastAction != 'paused'){
console.log("paused!");
// _gaq.push(['_trackEvent','video', 'Paused', getPercentage()]);
lastAction= "paused";
}
break;
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="youtube-container"></div>
<div>
<\!-- <div id="video1"></div>
<div id="video2"></div> -->
<\!-- <button class="btn" value="ssS" onclick=""></button> -->
<iframe id="you1" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/KrRW51FS1V4?enablejsapi=1" style="height: 360; width:640;"></iframe>
</div>
<div>
<iframe id="you2" width="640" height="360" src="https://www.youtube.com/embed/3qvrKJA8Obs?enablejsapi=1" frameborder="0" allowfullscreen></iframe></iframe>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">div {
display: block;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
//ajax 抓取 youtubelist json 資料
var getYoutubeList = function(){
var jqx = $.ajax({
method: "GET",
url: "https://dl.dropboxusercontent.com/u/43833728/youtube-list.json",
dataType: "json"
});
jqx.done(function(result){
showYoutubeList(result);
}).fail(function(result){
console.log("youtube list load error!!");
});
};
getYoutubeList();
//呈現 youtube iframe
var showYoutubeList = function(result) {
var dataLength = result.length,
container = $("#youtube-container");
for(i = 0; i < dataLength; i++) {
container.append(
'<iframe class="' + result[i].id +'" id="'+ result[i].id +'" class="youtubeframe" src="https://www.youtube.com/embed/'+ result[i].youtube_id + '?enablejsapi=1" frameborder="0" allowfullscreen></iframe>');
}
};
});
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// on 事件
$(window).on("load", onYouTubeIframeAPIReady);
// 一個綁定u2物件的函數
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video2', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video3', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready. Uncomment the below code to start video when ready
function onPlayerReady(event) {
//event.target.playVideo();
}
function onPlayerStateChange(event) {
var lastAction="";
switch (event.data){
case YT.PlayerState.PLAYING:
if (lastAction != 'paused'){
console.log("play!");
// ga('send', 'event','video', 'Playing', 'youTubePlayer');
}
else{
lastAction = '';
}
break;
case YT.PlayerState.ENDED:
console.log("ended!");
// _gaq.push(['_trackEvent','video', 'Completed',getPercentage()]);
break;
case YT.PlayerState.PAUSED:
if (lastAction != 'paused'){
console.log("paused!");
// _gaq.push(['_trackEvent','video', 'Paused', getPercentage()]);
lastAction= "paused";
}
break;
}
}
</script></body>
</html>
Raw
YTPlayer.js
$(document).ready(function(){
//ajax 抓取 youtubelist json 資料
var getYoutubeList = function(){
var jqx = $.ajax({
method: "GET",
url: "https://dl.dropboxusercontent.com/u/43833728/youtube-list.json",
dataType: "json"
});
jqx.done(function(result){
showYoutubeList(result);
}).fail(function(result){
console.log("youtube list load error!!");
});
};
getYoutubeList();
//呈現 youtube iframe
var showYoutubeList = function(result) {
var dataLength = result.length,
container = $("#youtube-container");
for(i = 0; i < dataLength; i++) {
container.append(
'<iframe class="' + result[i].id +'" id="'+ result[i].id +'" class="youtubeframe" src="https://www.youtube.com/embed/'+ result[i].youtube_id + '?enablejsapi=1" frameborder="0" allowfullscreen></iframe>');
}
};
});
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// on 事件
$(window).on("load", onYouTubeIframeAPIReady);
// 一個綁定u2物件的函數
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video2', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('video3', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready. Uncomment the below code to start video when ready
function onPlayerReady(event) {
//event.target.playVideo();
}
function onPlayerStateChange(event) {
var lastAction="";
switch (event.data){
case YT.PlayerState.PLAYING:
if (lastAction != 'paused'){
console.log("play!");
// ga('send', 'event','video', 'Playing', 'youTubePlayer');
}
else{
lastAction = '';
}
break;
case YT.PlayerState.ENDED:
console.log("ended!");
// _gaq.push(['_trackEvent','video', 'Completed',getPercentage()]);
break;
case YT.PlayerState.PAUSED:
if (lastAction != 'paused'){
console.log("paused!");
// _gaq.push(['_trackEvent','video', 'Paused', getPercentage()]);
lastAction= "paused";
}
break;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment