s457990/Watch-with-friends
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scripts and working embedded player

Browse Source
This commit is contained in:
Kacper Maj 2020-12-30 20:01:31 +01:00
parent a82168f30f
commit aa219ad431
4 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -4,7 +4,7 @@
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="./landing-page-css.css" rel="stylesheet" /> <link href="./landing-page-css.css" rel="stylesheet" />
<title>Document</title> <title>Document</title>
<script type="text/javascript" defer src="index.js"></script>
<!-- Bootstrap --> <!-- Bootstrap -->
<!-- Font Awesome --> <!-- Font Awesome -->
<link <link
@ -40,9 +40,9 @@
<footer class="bg-grey text-center text-lg-start"> <footer class="bg-grey text-center text-lg-start">
<!-- Copyright --> <!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.4)"> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.4)">
<a class="text-light" href="https://mdbootstrap.com/">Stworzone przez Kacpra Maja na zajęcia Pracowni Programowania</a> <a class="text-light">Stworzone przez Kacpra Maja na zajęcia Pracowni Programowania</a>
<br/> <br/>
<a class="text-light" href="https://mdbootstrap.com/">Numer indeksu: s457990</a> <a class="text-light">Numer indeksu: s457990</a>
</div> </div>
<!-- Copyright --> <!-- Copyright -->
</div> </div>

5
index.js Normal file
View File

@ -0,0 +1,5 @@
"use strict";
const button = document.getElementById("create-room");
button.addEventListener('click', () => console.log("dziala!"));

59
room.html
View File

@ -3,6 +3,7 @@
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="./room-style.css" rel="stylesheet" /> <link href="./room-style.css" rel="stylesheet" />
<script type="text/javascript" defer src="room.js"></script>
<title>Document</title> <title>Document</title>
<!-- Bootstrap --> <!-- Bootstrap -->
@ -45,9 +46,9 @@
</a> </a>
<!-- search form --> <!-- search form -->
<form id="yt-link" class="d-flex input-group w-50 "> <form class="d-flex input-group w-50 ">
<input type="search" class="form-control" placeholder="Wklej link do filmu na youtubie" aria-label="Search"/> <input type="search" class="form-control" id="yt-link" placeholder="Wklej link do filmu na youtubie" aria-label="Search"/>
<button class="btn btn-outline-light" type="button" data-mdb-ripple-color="light"> <button class="btn btn-outline-light" id="link-do-filmu-btn" type="button" data-mdb-ripple-color="light">
Oglądaj! Oglądaj!
</button> </button>
</form> </form>
@ -59,52 +60,12 @@
<!-- YT PLAYER --> <!-- YT PLAYER -->
<div class="row light-dark d-flex justify-content-center"> <div class="row light-dark d-flex justify-content-center">
<div id="yt-player" class="col-md-8 d-flex justify-content-center"> <div class="col-md-8 d-flex justify-content-center">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player">
<div id="player"></div> <iframe id="yt-player-iframe" width="900" height="500" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
<script> allowfullscreen></iframe>
// 2. This code loads the IFrame Player API code asynchronously. </div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '500',
width: '900',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</div> </div>

20
room.js Normal file
View File

@ -0,0 +1,20 @@
"use strict";
const ytPlayer = document.getElementById("yt-player-iframe");
const linkBtn = document.getElementById("link-do-filmu-btn");
const linkForm = document.getElementById("yt-link");
let link, index;
console.log(ytPlayer.src);
linkBtn.addEventListener('click', (e) => {
e.preventDefault();
console.log(linkForm.value);
if(!linkForm.value) return alert("Wklej link do filmu na Youtube!");
link = linkForm.value;
index = link.lastIndexOf('youtube.com/watch?v=')+20;
link = link.substr(index);
link = 'https://www.youtube.com/embed/' + link;
ytPlayer.src = link;
console.log(ytPlayer);
linkForm.value = ''
});