0

我编写了一个 HTML 和 javascript 代码来检查 youtube 视频的状态，并在单击暂停和播放按钮时暂停和播放它。我还使用 javascript 在 html 容器中的 mp4 嵌入视频上做了一个函数，以对这个视频做同样的事情。但是，我需要更改最后一个，而是对保存在谷歌云存储桶中的视频做同样的事情。但是，我没有找到像 youtube 这样的 API 来访问谷歌云视频上的这些信息。我基本上需要更改谷歌云存储视频的所有 mp4 并保持相同的功能。有什么资料吗？

<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>

4

0 回答 0