使用 Javascript 更改 BackgroundColor 包括视频序列动画

Question

我试图在 JS 中突出显示视频的字幕。视频序列工作完全正常，但字幕没有突出显示。

背后的想法是：

如果 video1 正在启动，则 video1 的字幕同时突出显示

之后

如果视频2正在启动，则视频2的字幕同时高亮显示 ...

HTML:

<div class="flex-container">
                    <div class="flex-item">
                        <video id="video1" poster="/assets/vids1/1.png" muted autoplay>
                            <source src="/assets/vids1/1.webm" type="video/webm" />
                        </video>
                        <h1 id="dcka">TEST</h1>
                    </div>
        
                    <div class="flex-item">
                        <video id="video2" poster="/assets/vids1/2.png" muted >
                            <source src="/assets/vids1/2.webm" type="video/webm" />
                        </video>
                                        
                    </div>
        
                    <div class="flex-item">
                        <video id="video3" poster="/assets/vids1/3.png" muted >
                            <source src="/assets/vids1/3.webm" type="video/webm" />
                        </video>
                                         
                    </div>
        
                    <div class="flex-item">
                        <video id="video4" poster="/assets/vids1/4.png" muted >
                            <source src="/assets/vids1/4.webm" type="video/webm" />
                        </video>
                                        
                    </div>
  </div>

JS:

window.onload = function()
         { 
            //now that the window has loaded we add our event listeners to the videos.
            //When video1 has ended, play video2 etc
                document.getElementById("video1").addEventListener("ended", function()
                {
                    playVideo("video2");     
                    
                    // title
                    var el = document.getElementById('dcka');
                    setColor(el, 'green')
                });
     
                document.getElementById("video2").addEventListener("ended", function()
                {
                    playVideo("video3"); 
                });
     
                document.getElementById("video3").addEventListener("ended", function()
                { 
                    playVideo("video4"); 
                });          
          }

        function playVideo(videoID)
        {
            //This playVideo function takes in the ID of a video element and plays that video.         
            var videoElement = document.getElementById(videoID);
            videoElement.play();
        }

        function setColor(element, color)
        {
            element.style.backgroundColor = color;
        }

感谢您的帮助:)

编辑 pythonmaxi（工作）：

 window.onload = function()
         { 
            //now that the window has loaded we add our event listeners to the videos.
            //When video1 has ended, play video2 etc
                const dcka = document.getElementById('dcka');
     
                 document.getElementById("video1").addEventListener("play", function()
                 {
                    setColor(dcka, "darkgreen");
                 });

                document.getElementById("video1").addEventListener("ended", function()
                {
                    playVideo("video2");     
                });
     
                document.getElementById("video2").addEventListener("ended", function()
                {
                    playVideo("video3"); 
                });
     
                document.getElementById("video3").addEventListener("ended", function()
                { 
                    playVideo("video4"); 
                });          
          }

        function playVideo(videoID)
        {
            //This playVideo function takes in the ID of a video element and plays that video.         
            var videoElement = document.getElementById(videoID);
            videoElement.play();
        }

        function setColor(element, color)
        {
            element.style.backgroundColor = color;
        }

Answer 1

我不确定我是否理解正确，您想在 video1 启动时更改 #dcka 的 background-color 吗？

在这种情况下，您需要添加一个 play 事件侦听器来调用 setColor(dckael, whatevercolor):

const dcka = document.getElementById('dcka');

document.getElementById("video1").addEventListener("play", function() {
    setColor(dcka, "darkgreen" /* what ever color you want */ );
});

使用 Javascript 更改 BackgroundColor 包括视频序列动画

Changing BackgroundColor with Javascript included video sequence animation

html

javascript

jquery

addeventlistener