Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
<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); }
}
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.