HTML5 빈 칸 채우기

빈 div에서 HTML5 비디오를 표시하고 애니메이션으로 페이지를 채우려 고합니다. 애니메이션이 작동하지만 비디오가 재생되지 않습니다. 왜 이것이 가능한지에 대한 가능한 제안은 무엇입니까?HTML5 빈 칸 채우기

CSS

.box { 
    margin: 30px auto; 
    transition: all 2s linear; 
    display: block; 
} 

.hidden { 
    display: none; 
} 

.visuallyhidden { 
    opacity: 0; 
} 

button { 
    display: block; 
    margin: 0 auto; 
} 

</style>

HTML

<div id="box" class="box"> 

<video controls autoplay id="back"> 
<source src="HomepagemockupVid_2.mp4" type="video/mp4"> 
</video> 

</div> 

    <button>TOGGLE VISIBILITY</button>

자바 스크립트

var box = $('#box'); 

$('button').on('click', function() { 

    if (box.hasClass('hidden')) { 

    box.removeClass('hidden'); 
    setTimeout(function() { 
     box.removeClass('visuallyhidden'); 
    }, 20); 

    } else { 

    box.addClass('visuallyhidden'); 

    box.one('transitionend', function(e) { 

     box.addClass('hidden'); 

    }); 

    } 

});

출처

2014-04-04 user3498225

동영상이 나타나고 재생되지 않거나 * 표시되지 않습니까 *? –

예, 버튼을 클릭하면 비디오가 나타나고 재생 중입니다. – user3498225

I가 소스 태그의 src 속성을 전환 한 후 나는 JSBin에 코드를 삽입하고 잘 작동하는 것 같다 실제로 파일을 가리키는 파일

그래서 당신이 올바른 파일을 가리키는되어 있는지 확인하고,

<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">

결론

에

<source src="HomepagemockupVid_2.mp4" type="video/mp4">

에서 변경?

출처

2014-04-06 15:15:43

HTML5 빈 칸 채우기

답변

관련 문제