Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>YouTube-Clip</title>
- <script src="/socket.io/socket.io.js"></script>
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"
- integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
- </script>
- <style>
- #youtube-clip {
- top: 50%;
- left: 50%;
- width: 400px;
- height: 225px;
- margin-top: -9em;
- margin-left: -15em;
- border: 1px solid #ccc;
- background-color: #f3f3f3;
- position: fixed;
- }
- </style>
- </head>
- <body style="background-color: transparent">
- <div id="youtube-clip" style="display: none;"></div>
- </body>
- <script>
- 'use strict';
- //https://www.youtube.com/watch?v=b9XNyeeJZ2k
- const socket = io.connect();
- const NORMALIZE_VOLUME = 0.25;
- const player = {
- jdiv: null,
- controller: null
- };
- socket.on('connect', onConnect);
- socket.on("disconnect", onDisconnect);
- socket.on('youtube-clip-play', playerPlay);
- socket.on('youtube-clip-stop-hide', playerStopHide);
- // TODO: make clip volume command
- socket.on('youtube-clip-volume', playerVolume);
- socket.on('youtube-clip-is-player-playing', playerIsPlayerPlaying);
- // TODO: make clip watch command
- socket.on('youtube-clip-watch', playerWatch);
- // Load the IFrame Player API code asynchronously.
- const tag = document.createElement('script');
- tag.src = "https://www.youtube.com/player_api";
- const firstScriptTag = document.getElementsByTagName('script')[0];
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- function onConnect() {
- console.log("client Connected to server");
- }
- function onDisconnect() {
- console.log("client disconnected from server");
- }
- // Replace the 'youtube-clip' element with an <iframe> and
- // YouTube player after the API code downloads.
- function onYouTubePlayerAPIReady() { //onYouTubeIframeAPIReady()
- player.controller = new YT.Player('youtube-clip', {
- width: '400',
- height: '225',
- videoId: 'zz6BaNiPkgY',
- events: {
- 'onReady': onPlayerReady,
- 'onStateChange': onPlayerStateChange,
- 'onError': onPlayerError
- }
- });
- }
- function playerWatch(data) {
- if (data.watch) {
- player.jdiv.show();
- } else {
- player.jdiv.hide();
- }
- }
- function onPlayerReady(event) {
- //event.target.setPlaybackQuality('144p');
- player.controller = event.target;
- player.jdiv = $('#youtube-clip');
- playerStopHide();
- socket.emit('youtube-clip-ready');
- }
- function onPlayerStateChange(event) {
- /*if (event.data == YT.PlayerState.BUFFERING) {
- event.target.setPlaybackQuality('144p');
- }*/
- if (player.controller.getPlayerState() === YT.PlayerState.PLAYING/*playing*/) {
- playerWatch(player.options);
- return;
- } else if (player.controller.getPlayerState() === YT.PlayerState.ENDED/*ended*/) {
- player.jdiv.hide();
- socket.emit('youtube-clip-ended');
- } else {
- // console.log(player.controller.getPlayerState());
- }
- }
- function onPlayerError(event) {
- }
- function playerPlayClip(data) {
- }
- function playerPlay(options) {
- player.controller.setPlaybackQuality(options.quality);
- player.controller.loadVideoById({
- videoId: options.parameters.videoId,
- startSeconds: options.parameters.startSeconds,
- endSeconds: options.parameters.endSeconds
- });
- player.controller.playVideo();
- player.options = options;
- playerVolume(options);
- console.log('youtube-clip-play', options);
- }
- function playerVolume(options) {
- const volume = options.volume * NORMALIZE_VOLUME;
- player.controller.setVolume(volume);
- }
- function playerStopHide() {
- player.controller.stopVideo();
- player.jdiv.hide();
- }
- function playerIsPlayerPlaying() {
- socket.emit('youtube-clip-is-player-playing', {
- is_playing: (player.controller.getPlayerState() !== YT.PlayerState.ENDED && (player.jdiv.not(':hidden').length === YT.PlayerState.PLAYING)),
- options: player.options
- }, data => logCallback('youtube-clip-is-player-playing', data));
- }
- function msTimes() {
- const options = player.options;
- let duration = 0;
- let position = 0;
- let remaining = 0;
- let item_id = '';
- try {
- duration = options.duration_ms / 1000; //options. player.controller.getDuration();
- position = (options.parameters.startSeconds / 1000) + player.controller.getCurrentTime();
- remaining = duration - position;
- item_id = player.controller.getVideoData().video_id;
- } catch (error) {
- duration = 0;
- position = 0;
- remaining = 0;
- item_id = player.controller.getVideoData().video_id;
- }
- return {
- duration_ms: duration * 1000,
- position_ms: position * 1000,
- remaining_ms: remaining * 1000,
- is_playing: player.controller.getPlayerState() === YT.PlayerState.PLAYING,
- item_id: player.controller.getVideoData().video_id
- }
- }
- function logCallback(type, data) {
- console.log(type, data);
- }
- $(document).ready(() => {
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement