Блог

Я работал над созданием этого шаблона с использованием javascript, и, похоже, я не могу получить видео, которое у меня есть на экране, чтобы активировать событие после завершения видео. Содержимое страницы загружается через файл JSON. Для «videoDemo1» установлено значение автозапуска, поэтому я надеюсь, что я не вызову EventListener до того, как видео появится в HTML-документе. Если есть какие-либо вопросы, просто задавайте, спасибо. Вот мой код:

функция buildVideoContent(PageData) {

     // build the layout
    let layout = buildColumns(pageData.layout);
    // get page container from DOM
    let page = document.getElementById('page_frame');
    // clear the page frame
    page.innerHTML = "";
    
    // main video container
    let mainVidCont = document.createElement('div');
    mainVidCont.id = "main-cont";
    mainVidCont.classList.add('bg-height');
    page.appendChild(mainVidCont);
    
    // add video wrapper and video content (start video and end video)
    let vidWrapper = document.createElement('div');
    vidWrapper.id = "vDemoWrapper";
    vidWrapper.classList.add('vid-wrapper-bg');
    vidWrapper.innerHTML = "<video id='videoDemo1' controls autoplay muted loop class='video-bg'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video><video id='videoDemo2' controls loop class='video-bg btn-hide'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video>";
    mainVidCont.appendChild(vidWrapper);
    
    // create the containers for content and buttons
    for(let i = 1; i <= 10; i  ){
        let innerContent = document.createElement('div');
        innerContent.id = "aniContentInfo"   i   "";
        innerContent.classList.add('inner-cont');
        //innerContent.classList.add('animation-fadein');
        innerContent.classList.add('col-4');
        innerContent.classList.add('float-left');
        mainVidCont.appendChild(innerContent);
    }
    
        let sumDiv1 = document.getElementById('aniContentInfo1');
        let sumDiv2 = document.getElementById('aniContentInfo2');
        let sumDiv3 = document.getElementById('aniContentInfo3');
        let sumDiv4 = document.getElementById('aniContentInfo4');
        let sumDiv5 = document.getElementById('aniContentInfo5');
        let sumDiv6 = document.getElementById('aniContentInfo6');
        let sumDiv7 = document.getElementById('aniContentInfo7');
        let sumDiv8 = document.getElementById('aniContentInfo8');
        let sumDiv9 = document.getElementById('aniContentInfo9');
        let sumDiv10 = document.getElementById('aniContentInfo10');
        
        let viewerText1 = buildContentCard(pageData.content1.text_elements, false);
        let viewerText2 = buildContentCard(pageData.content2.text_elements, false);
        let viewerText3 = buildContentCard(pageData.content3.text_elements, false);
        let viewerText4 = buildContentCard(pageData.content4.text_elements, false);
        let viewerText5 = buildContentCard(pageData.content5.text_elements, false);
        let viewerText6 = buildContentCard(pageData.content6.text_elements, false);
        let viewerText7 = buildContentCard(pageData.content7.text_elements, false);
        let viewerText8 = buildContentCard(pageData.content8.text_elements, false);
        let viewerText9 = buildContentCard(pageData.content9.text_elements, false);
        let viewerText10 = buildContentCard(pageData.content10.text_elements, false);
        
        sumDiv1.appendChild(viewerText1);
        sumDiv2.appendChild(viewerText2);
        sumDiv3.appendChild(viewerText3);
        sumDiv4.appendChild(viewerText4);
        sumDiv5.appendChild(viewerText5);
        sumDiv6.appendChild(viewerText6);
        sumDiv7.appendChild(viewerText7);
        sumDiv8.appendChild(viewerText8);
        sumDiv9.appendChild(viewerText9);
        sumDiv10.appendChild(viewerText10);
    
    // create buttons and add them to content container
    for(let v = 1; v <= 10; v  ){
            
        let continueBtn = document.createElement('BUTTON');
        continueBtn.id = "continue-btn"   v   "";
        continueBtn.classList.add('btn-primary');
        continueBtn.classList.add('btn');
        continueBtn.innerHTML = "CONTINUE";
        
        let paraCont = document.getElementById("aniContentInfo"   v   "");
        paraCont.appendChild(continueBtn);
        
            for(let c = 1; c <= 9; c  ){
                let count = document.getElementById("aniContentInfo"   c   "");
                count.classList.add('btn-hide');
            }
        
        if(v = 10){
            document.getElementById("aniContentInfo10").classList.add('animation-fadein');
        }
            
    };
    
 

// КОД, ПРОКОММЕНТИРОВАННЫЙ НИЖЕ, — ЭТО ДОПОЛНИТЕЛЬНЫЕ EVENTLISTENERS, КОТОРЫЕ Я ПРОБОВАЛ

     /* document.addEventListener('DOMContentLoaded', () => {
        var vid = document.getElementById("videoDemo1");
            vid.onended = function() {
            document.getElementById("aniContentInfo10").classList.add('animation-fadein');
        };
    
    
        if ( video.readyState === 4 ) {
            let vid = document.getElementById('videoDemo1');
            vid.addEventListener("ended", function(e){
                if(state === 0){
                    let videoElement = document.getElementById('videoDemo1');
                    videoElement.classList.add('vid-opacity');
                 
                }
            });
        }
    }); */
    
    
 

// НИЖЕ Я НАПИСАЛ ADDEVENTLISTENER

     document.getElementById('videoDemo1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
        document.getElementById("aniContentInfo10").classList.add('animation-fadein');
    };
    
 

// APPARENTLY THIS DOESN’T WORK WHEN I RUN THE CODE

     // create click events for each button to proceed to next content container
    for(let h = 1; h <= 10; h  ){
        
        continueBtn = document.getElementById('continue-btn'   h   '');
        
        document.getElementById('continue-btn'   h   '').addEventListener("click", function userProgression(e){
            
            let subOne = h - 1;
            
            let videoElement = document.getElementById('videoDemo1');
            
            videoElement.classList.remove('vid-opacity');
            videoElement.classList.add('vid-visible');
            
            let videoElement2 = document.getElementById('videoDemo2');
            
            videoElement2.classList.remove('btn-hide');
            videoElement2.classList.add('btn-show');
            
            // remove button and content from screen to reveal new content container
            setTimeout(function(){
                let hMinus = h - 1;
                let contentInnerNum = document.getElementById('aniContentInfo'   h   '');
                contentInnerNum.classList.remove('btn-hide');
                contentInnerNum.classList.remove('animation-fadein');
                contentInnerNum.classList.add('animation-fadeout');
                
                if(hMinus !== 0){
                    let contentNumMinus = document.getElementById('aniContentInfo'   hMinus   '');
                    contentNumMinus.classList.remove('btn-hide');
                    contentNumMinus.classList.add('animation-fadein');
                    contentNumMinus.classList.remove('animation-fadeout');
                }
                
                let contentBtn = document.getElementById('continue-btn'   h   '');
                contentBtn.classList.add('animation-fadeout');
                
                let contentInner = document.getElementById('continue-btn'   subOne   '');
                contentInner.classList.remove('btn-hide');
                contentInner.classList.remove('btn-show');
                contentInner.classList.add('btn-center');
                
            }, 3000);
            
            // add classes to content elements from the above lines to to remove them completely
            setTimeout(function(){
                let topBtn = document.getElementById('continue-btn'   h   '');
                topBtn.classList.add('btn-hide');
                
                let contentInner = document.getElementById('aniContentInfo'   h   '');
                contentInner.classList.add('btn-hide');
            }, 6000);   
            
            // set timer to make next second video visible.
            setTimeout(function(){
                
                let hMinus = h - 1;
                    if(hMinus !== 0){
                        let videoElement1a = document.getElementById('videoDemo1');
                        videoElement1a.classList.remove('vid-opacity');
                        videoElement1a.classList.add('vid-visible');
                    }
                
                let videoElement2 = document.getElementById('videoDemo2');
                videoElement2.classList.remove('btn-show');
                videoElement2.classList.add('btn-hide');
                
                }, 8000);
            
            // important! bring back original first video at the exact second the second video ends
            setTimeout(function(){
                    let videoElement1b = document.getElementById('videoDemo1');
                        videoElement1b.classList.remove('vid-visible');
                        videoElement1b.classList.add('vid-opacity');
                }, 60000);  
            
                
        });
        
        
    }
    
 

// Я ТАКЖЕ ПОПЫТАЛСЯ РАЗМЕСТИТЬ EVENTLISTENER ЗДЕСЬ, НО БЕЗУСПЕШНО

     /* document.addEventListener("DOMContentLoaded", function(event) {
        let vid1 = document.getElementById("videoDemo1");
            if ( vid1.readyState === 4 ) {
                vid1.onended = () => {
                    vid1.classList.add('vid-opacity');
                };
            }
    });*/
    
    
    
}
 

Если это то, чего мне не хватает, любая помощь будет оценена, спасибо