I have written an HTML and javascript code to check the state of a youtube video and pause and play it when clicking pause and play buttons. I also did a function on an mp4 embeded video in an html container with javascript to do the same with this video. However, I need to change this last one and instead do the same thing with a video saved in a bucket in google cloud. However, I am not finding an API like the youtube one in order to access this information on the google cloud video. I basically need to change all of the mp4 for a google Cloud stored video and maintain the same functionality. Any info?
<script th:filename="${homeee.VideoFileName()}"> var filename = document.currentScript.getAttribute('filename'); //this is the google cloud video which in the html is displayed in an iframe document.getElementById('videodownloaded').src = "https://storage.googleapis.com/auto-sign-main//tmp/"+ filename; var player; //this is the mp4 locally saved video const media = document.querySelector('video'); //these are the play and pause buttons const play = document.querySelector('#play-button'); const pause = document.querySelector('#pause-button'); play.addEventListener('click', playMedia); pause.addEventListener('click', pauseMedia); //functions to control the mp4 video with the buttons function playMedia() { if(media.paused) { media.play(); } } function pauseMedia() { if(media.paused != true) { media.pause(); } } //function for the YT video control function onYouTubePlayerAPIReady() { // create the global player from the specific iframe (#video) player = new YT.Player('video', { events: { // call this function when player is ready to use'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } }); startInterval() } //function to coordinate the YT video and the mp4 video function onPlayerStateChange(event){ if (event.data == YT.PlayerState.PAUSED) { media.pause(); } else{ media.play(); } } //function to check the time difference between youtube and mp4 in case of lag function startInterval() { var CheckT = document.getElementById("Check_time"); const media = document.querySelector('video'); //checks every 100ms to see if the video has reached 6s checkInt = setInterval(function() { if (Math.abs(media.currentTime - player.getCurrentTime())>= 0.5) { media.currentTime = player.getCurrentTime(); //CheckT.innerHTML += player.getCurrentTime(); }; }, 100) } function onPlayerReady(event) { //var CheckT = document.getElementById("Check_time"); //CheckT.innerHTML += player.getCurrentTime(); // bind events //function to control YT video with the buttons var playButton = document.getElementById("play-button"); playButton.addEventListener("click", function() { player.playVideo(); }); var pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", function() { player.pauseVideo(); }); var stopButton = document.getElementById("stop-button"); stopButton.addEventListener("click", function() { player.stopVideo(); }); } // Inject YouTube API script var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);</script>