recentpopularlog in

ference : html5   136

« earlier  
A Guide to Responsive CSS Video Background | Red Stapler
html,body {
width:100vw;
height: 100vh;
margin: 0;
}
#videoBG {
position:fixed;
z-index: -1;
}
@media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
@media (max-width: 767px) {
#videoBG {
display: none;
}
body {
background: url('poster.jpg');
background-size: cover;
}
}
responsive  fullscreen  video  background  HTML5 
7 weeks ago by ference
javascript - HTML5 Video custom additional seek bar - Stack Overflow
vid.ontimeupdate = function(){
var percentage = ( vid.currentTime / vid.duration ) * 100;
$("#custom-seekbar span").css("width", percentage+"%");
};

$("#custom-seekbar").on("click", function(e){
var offset = $(this).offset();
var left = (e.pageX - offset.left);
var totalWidth = $("#custom-seekbar").width();
var percentage = ( left / totalWidth );
var vidTime = vid.duration * percentage;
vid.currentTime = vidTime;
});//click()
progress  timeline  video  html5  bar  js 
march 2018 by ference
brianchirls/Seriously.js: A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
Seriously.js - A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
javascript  video  effects  webgl  html5  js  code  webrtc  greenscreen 
march 2017 by ference
« earlier      
per page:    204080120160

Copy this bookmark:





to read