"Dé grootste en gratis computerhelpdesk van Nederland"
Loading indicator weergeven
- Onderwerp starter Thomasje
- Startdatum
- Status
- Lid geworden
- 13 aug 2013
- Berichten
- 5.374
Als niets eenvoudigs is te vinden dan is de basis css icon en js readyState
De js moet de icon verbergen zodra de video ready is om af te spelen. Er moet hier dus nog wel wat css en js omheen gezet worden.
De js moet de icon verbergen zodra de video ready is om af te spelen. Er moet hier dus nog wel wat css en js omheen gezet worden.
- Lid geworden
- 13 aug 2013
- Berichten
- 5.374
Een voorbeeldje voor je gemaakt, volledig css. Misschien kan je hiermee verder. Het "icon" loader voorbeeld komt van w3schools. Het video element en de 3 Javascript events (in het script) staan in de w3schools reference.
Suc6. Have fun.
Code:
<div id="wrapvideo">
<div id="icon"></div>
<video id="video" width="320" height="240" controls onloadstart="showIcon" oncanplay="hideIcon">
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
</video>
</div>
<script>
var ico = document.getElementById("icon");
var vid = document.getElementById("video");
vid.onloadstart = function() { ico.style.display = "block"; }
vid.onwaiting = function() { ico.style.display = "block"; }
vid.oncanplay = function() { ico.style.display = "none"; }
</script>
css
#wrapvideo {
position: relative;
width: 320px;
height: 240px;
margin: 30px auto;
}
#video {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: baseline;
}
#icon {
position: absolute;
top: 50%; left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
z-index: 1;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Laatst bewerkt:
De code die je opgeeft heb ik in de pagina gezet en het werkt. Maar ik krijg i.p.v. een loading indicator een startpijl (in het midden van het video beeld)te zien. Ik wil een loading indicator. Of heb ik iets gemist?
Edit: ik heb de loader inmiddels wel op de video webpagina gekregen maar hij staat niet IN maar BOVEN het video beeld.
En na verder experimenteren met jouw code zie ik de loader en de startpijl door elkaar.
Edit: ik heb de loader inmiddels wel op de video webpagina gekregen maar hij staat niet IN maar BOVEN het video beeld.
En na verder experimenteren met jouw code zie ik de loader en de startpijl door elkaar.
Laatst bewerkt:
Sorry dat ik jouw code even links laat liggen omdat ik er niet uit kom. Verder zoekend vond ik deze website:
http://demos.flowplayer.org/lookandfeel/loading-custom.html
Style heb ik ongewijzigd gelaten en Body alsvolgt aangepast:
<script>
window.onload = function () {
flowplayer("#player", {
};
</script>
<div id="player"><video width="640" height="360" controls="controls" autoplay="autoplay">
<source src="https://pc-makkelijk.nl/xxxxx/test.mp4" type="video/mp4">
</source></video></div>
De loading animatie werkt nu weliswaar zoals het hoort, maar ik twijfel of <script> </script> correct is.
http://demos.flowplayer.org/lookandfeel/loading-custom.html
Style heb ik ongewijzigd gelaten en Body alsvolgt aangepast:
<script>
window.onload = function () {
flowplayer("#player", {
};
</script>
<div id="player"><video width="640" height="360" controls="controls" autoplay="autoplay">
<source src="https://pc-makkelijk.nl/xxxxx/test.mp4" type="video/mp4">
</source></video></div>
De loading animatie werkt nu weliswaar zoals het hoort, maar ik twijfel of <script> </script> correct is.
Laatst bewerkt:
- Lid geworden
- 13 aug 2013
- Berichten
- 5.374
RE: Maar ik krijg i.p.v. een loading indicator een startpijl (in het midden van het video beeld)te zien. Ik wil een loading indicator. Of heb ik iets gemist?
Nog een keer gecontroleerd in Chrome en IE. Het werkt prima. In het script heb ik deze loader op de <video> gelegd. Je ziet de loading icon vanaf het moment dat de video gaat laden tot het moment waarop de video kan afspelen. Bij een kleine video (zoals in het voorbeeld wat ik gaf) kan dit dus kort zijn. Zet de 2 commentaar streepjes tijdelijk voor deze regel als je wilt zien hoe de loading icon eruit ziet // vid.oncanplay = .......
RE: ... maar ik twijfel of <script> </script> correct is. (je andere bericht)
Ik kan niet zien of je werkelijk de FlowPlayer gebruikt. Als dat wel het geval is dan heb je niets aan mijn code, die informatie gaf je niet.
Als je FlowPlayer niet gebruikt dan kan bij #5 alles vanaf <script> t/m </scriptp> sowieso weg, daar heb je dan niets aan.
Alles bij elkaar denk ik dat je ergens anders een video player script hebt geladen die een pijl op de video zet en dat daardoor mijn script niet werkt. Mijn script zet echt alleen maar een loading icon (niet een pijl) op de video. Je zal even alle <script src="..."> moeten nalopen wat er allemaal wordt geladen. Mogelijk zit daar het probleem.
Nog een keer gecontroleerd in Chrome en IE. Het werkt prima. In het script heb ik deze loader op de <video> gelegd. Je ziet de loading icon vanaf het moment dat de video gaat laden tot het moment waarop de video kan afspelen. Bij een kleine video (zoals in het voorbeeld wat ik gaf) kan dit dus kort zijn. Zet de 2 commentaar streepjes tijdelijk voor deze regel als je wilt zien hoe de loading icon eruit ziet // vid.oncanplay = .......
RE: ... maar ik twijfel of <script> </script> correct is. (je andere bericht)
Ik kan niet zien of je werkelijk de FlowPlayer gebruikt. Als dat wel het geval is dan heb je niets aan mijn code, die informatie gaf je niet.
Als je FlowPlayer niet gebruikt dan kan bij #5 alles vanaf <script> t/m </scriptp> sowieso weg, daar heb je dan niets aan.
Alles bij elkaar denk ik dat je ergens anders een video player script hebt geladen die een pijl op de video zet en dat daardoor mijn script niet werkt. Mijn script zet echt alleen maar een loading icon (niet een pijl) op de video. Je zal even alle <script src="..."> moeten nalopen wat er allemaal wordt geladen. Mogelijk zit daar het probleem.
- Status
