비디오가 버퍼링 중일 때 감지 GIF 표시

Question

비디오가 버퍼링되는 동안 .gif를 표시하는 방법이 있는지 궁금합니다.

HTML5 동영상 태그를 사용하고 있습니까? 동영상 내에 버퍼링되는 것을 감지 할 수있는 방법이 있습니까? 나는이 날 도움이 될 생각하지 않는다 그러나 나는 더 NetStream을가 무엇인지 단서 또는 어떤 액션 스크립트 3 인이 없기 때문에 ..

How to detect when video is buffering?

:

나는 살펴 보았다.

HTML :

<div id="popup-box" class="popupInfo"> 

      <img src="button/loading.gif" id="loadingGif" /> 

      <video src="fragmenten/real_schade.mp4" controls="controls" preload="auto" id="video" onclick="this.play();"> 

        Your browser doesn't support the video element. 

      </video> 

      <p class="buttons"> 
       <a href="http://www.reaal.nl/verzekering/autoverzekering/#routechecker" target="_blank" id="place_Holder" class="button btn1">Meer informatie</a> 
       <a href="http://www.reaal.nl/verzekering/autoverzekering/#basisdekking" target="_blank" id="place_Holder1" class="button licht hoverbtn2">Direct afsluiten</a> 
      </p> 

      <img src="button/sluit.png" class="close"> 

     </div> 

Answer 1

당신은 비디오 버퍼링 및 비디오가 재개 onplaying 이벤트 핸들러를 시작할 때 이미지를 보여주기 위해 비디오 요소에 onwaiting 이벤트 핸들러를 사용할 수 있습니다 (video element events 비교)

video.onwaiting = function(){ 
    showPlaceholder(placeholder, this); 
}; 
video.onplaying = function(){ 
    hidePlaceholder(placeholder, this); 
}; 

나는 약간의 방법을 만들 수있는 아이디어를 얻을 수있는 fiddle을 만들었다. (코드로 1 초가 지난 후에 버퍼링을 시뮬레이션했다.)

Answer 2

나는이 스레드가 실제로 오래되었음을 알고 있지만이 작업을 수행하는 데 어려움을 겪었으며이를 수행하는 방법을 알아 내고 올바르게 작동하도록하는 데 좋은 며칠이 걸렸으므로 향후 사용자에게 도움이 될 것으로 생각했습니다. 내가 그랬던 것처럼.

나는 위의 피들을 다시 제작하여 1 개 이상의 비디오에 기능을 추가했으며 gif를 다운로드하지 않고도 더 빨리 만들 수 있기 때문에 CSS 로더를 추가했습니다. 이제는 더 잘 작동하고 사용하기 쉽도록 확장 할 수 있습니다. 또한 위의 게시물에서 링크 된 이전 Js Fiddle의 지연을 제거했습니다. 확장하기 위해해야 ​​할 일은 단지 자바 스크립트의 섹션을 복사하고 태그를 고유하게 변경하는 것입니다.

변경이 라인 :

<div id="placeholder_1" class="placeholder"><div class="loader">Loading...</div></div> 

이 사람 :

<div id="placeholder_1" class="placeholder"><img src="https://i.imgur.com/OirdkJp.gif"></div> 

다음을 수행 CSS를 로더 대신 GIF를 사용하려면 여기 내 JS Jsfiddle

입니다 그것이 작동하는 방법은 자바 버퍼가 비디오를 버퍼링하는지 검사하고 자바 스크립트를 버퍼링하면이 html 줄을 호출합니다 <div id="placeholder_1" class="placeholder"> 그 다음 html 줄이 호출됩니다. 표시 할 CSS 로더.

복사 아래의 코드 및 고유 한 이름으로이 태그의 모든 변경 : 나는 내가 다음과 같이 확장하려면 Here

에서 그것을 가지고, 로더을 didnt한다.이 줄에 똑같은 작업을하십시오 : <div id="placeholder_1" class="placeholder"> 또한 js 태그와 같은 번호로 비디오에 ID를 추가하십시오 : id="video_1" (기본적으로 1을 다른 번호로 변경하십시오). 문제가 있으면 완료된 코드를 더 도움이 게시물의 하단 :

태그 :

video_1 
placeholder_1 

코드 :

var video = document.getElementById("video_1"); 
 
var placeholder = document.getElementById("placeholder_1"); 
 
placeholder_1.style.top = video_1.offsetTop + "px"; 
 
placeholder_1.style.left = video_1.offsetLeft + "px"; 
 

 
video_1.onwaiting = function() { 
 
    showPlaceholder(placeholder_1, this); 
 
}; 
 
video_1.onplaying = function() { 
 
    hidePlaceholder(placeholder_1, this); 
 
}; 
 

 
function showPlaceholder(img, vid) { 
 
    img.style.height = vid.scrollHeight + "px"; 
 
    img.style.width = vid.scrollWidth + "px"; 
 
    img.style.display = "block"; 
 
} 
 

 
function hidePlaceholder(img, vid) { 
 
    img.style.display = "none"; 
 
}

다음

가 완성 된 코드입니다 :

//Video one. 
 

 
var video = document.getElementById("video_1"); 
 
var placeholder = document.getElementById("placeholder_1"); 
 
placeholder_1.style.top = video_1.offsetTop + "px"; 
 
placeholder_1.style.left = video_1.offsetLeft + "px"; 
 

 
video_1.onwaiting = function() { 
 
    showPlaceholder(placeholder_1, this); 
 
}; 
 
video_1.onplaying = function() { 
 
    hidePlaceholder(placeholder_1, this); 
 
}; 
 

 
function showPlaceholder(img, vid) { 
 
    img.style.height = vid.scrollHeight + "px"; 
 
    img.style.width = vid.scrollWidth + "px"; 
 
    img.style.display = "block"; 
 
} 
 

 
function hidePlaceholder(img, vid) { 
 
    img.style.display = "none"; 
 
} 
 

 

 
//Video two. 
 

 
var video = document.getElementById("video_2"); 
 
var placeholder = document.getElementById("placeholder_2"); 
 
placeholder_2.style.top = video_2.offsetTop + "px"; 
 
placeholder_2.style.left = video_2.offsetLeft + "px"; 
 

 
video_2.onwaiting = function() { 
 
    showPlaceholder(placeholder_2, this); 
 
}; 
 
video_2.onplaying = function() { 
 
    hidePlaceholder(placeholder_2, this); 
 
}; 
 

 
function showPlaceholder(img, vid) { 
 
    img.style.height = vid.scrollHeight + "px"; 
 
    img.style.width = vid.scrollWidth + "px"; 
 
    img.style.display = "block"; 
 
} 
 

 
function hidePlaceholder(img, vid) { 
 
    img.style.display = "none"; 
 
} 
 

 
//Video three, 
 

 
var video = document.getElementById("video_3"); 
 
var placeholder = document.getElementById("placeholder_3"); 
 
placeholder_3.style.top = video_3.offsetTop + "px"; 
 
placeholder_3.style.left = video_3.offsetLeft + "px"; 
 

 
video_3.onwaiting = function() { 
 
    showPlaceholder(placeholder_3, this); 
 
}; 
 
video_3.onplaying = function() { 
 
    hidePlaceholder(placeholder_3, this); 
 
}; 
 

 
function showPlaceholder(img, vid) { 
 
    img.style.height = vid.scrollHeight + "px"; 
 
    img.style.width = vid.scrollWidth + "px"; 
 
    img.style.display = "block"; 
 
} 
 

 
function hidePlaceholder(img, vid) { 
 
    img.style.display = "none"; 
 
} 
 

 
//Video four. 
 

 
var video = document.getElementById("video_4"); 
 
var placeholder = document.getElementById("placeholder_4"); 
 
placeholder_4.style.top = video_4.offsetTop + "px"; 
 
placeholder_4.style.left = video_4.offsetLeft + "px"; 
 

 
video_4.onwaiting = function() { 
 
    showPlaceholder(placeholder_4, this); 
 
}; 
 
video_4.onplaying = function() { 
 
    hidePlaceholder(placeholder_4, this); 
 
}; 
 

 
function showPlaceholder(img, vid) { 
 
    img.style.height = vid.scrollHeight + "px"; 
 
    img.style.width = vid.scrollWidth + "px"; 
 
    img.style.display = "block"; 
 
} 
 

 
function hidePlaceholder(img, vid) { 
 
    img.style.display = "none"; 
 
}

.placeholder { 
 
    display: none; 
 
    position: absolute; 
 
    background-size: cover; 
 
    text-align: center; 
 
    float: left; 
 
    z-index: 300000; 
 
} 
 

 
.loader, 
 
.loader:before, 
 
.loader:after { 
 
    background: #ff8000; 
 
    -webkit-animation: load1 1s infinite ease-in-out; 
 
    animation: load1 1s infinite ease-in-out; 
 
    width: 1em; 
 
    height: 4em; 
 
} 
 

 
.loader { 
 
    color: #ff8000; 
 
    text-indent: -9999em; 
 
    margin: 88px auto; 
 
    position: relative; 
 
    font-size: 11px; 
 
    -webkit-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-animation-delay: -0.16s; 
 
    animation-delay: -0.16s; 
 
} 
 

 
.loader:before, 
 
.loader:after { 
 
    position: absolute; 
 
    top: 0; 
 
    content: ''; 
 
} 
 

 
.loader:before { 
 
    left: -1.5em; 
 
    -webkit-animation-delay: -0.32s; 
 
    animation-delay: -0.32s; 
 
} 
 

 
.loader:after { 
 
    left: 1.5em; 
 
} 
 

 
@-webkit-keyframes load1 { 
 
    0%, 
 
    80%, 
 
    100% { 
 
    box-shadow: 0 0; 
 
    height: 4em; 
 
    } 
 
    40% { 
 
    box-shadow: 0 -2em; 
 
    height: 5em; 
 
    } 
 
} 
 

 
@keyframes load1 { 
 
    0%, 
 
    80%, 
 
    100% { 
 
    box-shadow: 0 0; 
 
    height: 4em; 
 
    } 
 
    40% { 
 
    box-shadow: 0 -2em; 
 
    height: 5em; 
 
    } 
 
}

<video id="video_1" controls preload="none"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
</video> 
 

 
<div id="placeholder_1" class="placeholder"> 
 
    <div class="loader">Loading...</div> 
 
</div> 
 

 
<video id="video_2" controls preload="none"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
</video> 
 

 
<div id="placeholder_2" class="placeholder"> 
 
    <div class="loader">Loading...</div> 
 
</div> 
 

 
<video id="video_3" controls preload="none"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
</video> 
 

 
<div id="placeholder_3" class="placeholder"> 
 
    <div class="loader">Loading...</div> 
 
</div> 
 

 
<video id="video_4" controls preload="none"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
</video> 
 

 
<div id="placeholder_4" class="placeholder"> 
 
    <div class="loader">Loading...</div> 
 
</div>