Av@Tech
Learner
How to embed uploaded videos in row frames using HTML and Javascript (like Youtube)?
How to embed uploaded videos in row frames using HTML and Javascript (like Youtube)?
Share
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>Basic JavaScript Youtube Player- With playlist</title>
<style>
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #396a08;
color: black;
}
.next {
background-color: #19212f;
color: white;
}
.round {
border-radius: 50%;
}
</style>
</head>
<body>
<div class=”player” style=”width: 480px;height:360px;max-width: 50%;margin: 0 auto;”>
<div id=”youtube” style=”width: 100%;height: 100%”></div>
<div class=”controls” style=”text-align: center;margin: 0 auto;”>
<a href=”#” onclick=”YouTubePlayer.playPrevious()” class=”previous”>« Previous</a>
<a href=”#” onclick=”YouTubePlayer.playNext()” class=”next”>Next »</a>
</div>
</div>
<script src=”https://www.youtube.com/iframe_api”></script>
<script>
var YouTubePlayer = {
current: 0,
player: null,
/**
* Tracks ids here…
*/
videos: [
‘h3fnl2o4PsU’,
‘FvyCcLhM1vM’
],
currentlyPlaying:function(){
console.info(‘Current Track id’, YouTubePlayer.videos[YouTubePlayer.current]);
return YouTubePlayer.videos[YouTubePlayer.current];
},
playNext: function () {
YouTubePlayer.increaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert(‘Please Wait! Player is loading’);
}
},
playPrevious: function () {
YouTubePlayer.decreaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert(‘Please Wait! Player is loading’);
}
},
increaseTrack: function () {
YouTubePlayer.current = YouTubePlayer.current + 1;
if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
YouTubePlayer.current = 0;
}
},
decreaseTrack: function () {
YouTubePlayer.current = Math.max(YouTubePlayer.current – 1, 0);
},
onReady: function (event) {
event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
},
onStateChange: function (event) {
if (event.data == YT.PlayerState.ENDED) {
YouTubePlayer.playNext();
}
}
}
function onYouTubeIframeAPIReady() {
YouTubePlayer.player = new YT.Player(‘youtube’, {
height: ‘350’,
width: ‘425’,
events: {
‘onReady’: YouTubePlayer.onReady,
‘onStateChange’: YouTubePlayer.onStateChange
}
});
}
</script>
</body>
</html>