I am trying to create a custom video player, I have managed to add a seek bar now I would like to add a seek slider to my seek bar (video progress bar), meaning, I want something like this.
,
As the above image from Netflix user can slide the red circle back and force, I want the same in my custom player
Here is what I have so far.
Jsfiddle : demo
HTML
<div id="custom-seekbar">
<span></span>
</div>
<video id="video" width="400" controls autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
Js
var vid = document.getElementById("video");
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()
Css
#custom-seekbar
{
cursor: pointer;
height: 10px;
margin-bottom: 10px;
outline: thin solid orange;
overflow: hidden;
position: relative;
width: 400px;
}
#custom-seekbar span
{
background-color: orange;
position: absolute;
top: 0;
left: 0;
height: 10px;
width: 0px;
}
/* following rule is for hiding Stack Overflow's console */
.as-console-wrapper{ display: none !important;}
what do I need to do to achieve what I want?
try something like that.
#custom-seekbar span.hover:after{
content: '■';
display:block;
position: absolute;
background-color: red;
color: red;
top: 0;
right: 0;
}
$("#custom-seekbar").hover(function(){
$(this).find("span").addClass("hover");
}, function(){
$(this).find("span").removeClass("hover");
})
var sliderCanMove = false;
$("#custom-seekbar").on("mousedown", function(){
sliderCanMove = true;
});
$(window).on("mousemove", function(e){
if(sliderCanMove){
var offset = $("#custom-seekbar").offset();
var left = ((e.clientX + offset.left));
var totalWidth = $("#custom-seekbar").width();
var percentage = ( left / totalWidth );
var vidTime = vid.duration * percentage;
vid.currentTime = vidTime;
}
});
$(window).on("mouseup", function(){
sliderCanMove = false;
});
updated fiddle here.
Related
After searching for a long time for an answer, here is my question:
How can I reveal a part of a html5 video that is blurred when I hover on it?
Here is some code for HTML:
<div class="container">
<video autoplay muted controls>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
<source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
</video>
<div id="soblurme"></div>
</div>
Here is some code for CSS:
.container { position: relative; }
#soblurme {
position: absolute;
border: 1px solid white;
pointer-events: none;
width: 50px;
height: 50px;
left: 70px;
top: 20px;
/*-webkit-backdrop-filter: blur(0);*/
/*backdrop-filter: blur(0);*/
-webkit-filter: blur(0%);
filter: blur(0%);
}
video {
width: 50%;
cursor: none;
filter: blur(7px) opacity(1);
}
Here is some code for JS:
// just make the div follow the mouse
const mouse = {
x: 0,
y: 0,
dirty: false
};
const blurme = document.getElementById('soblurme');
document.querySelector('.container')
.addEventListener('mousemove', (evt) => {
mouse.x = evt.offsetX;
mouse.y = evt.offsetY;
// recently all UI events are already debounced by UAs,
// but all vendors didn't catch up yet
if( !mouse.dirty ) {
requestAnimationFrame( move );
}
mouse.dirty = true;
});
function move() {
blurme.style.left = (mouse.x - 25) + 'px';
blurme.style.top = (mouse.y - 25) + 'px';
mouse.dirty = false;
}
So, being it blurry, I would like to hover and reveal a part around the pointer so you can see through the blurred div.
I am experiencing an issue where the progress bar is behind, if you click THIS LINK and go to the second song you will see that the progress bar is all messed up. If anyone has a solution please help! This is an image of what the problem is. Also this is all the coding I think necessary to solve the problem.
var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
audio.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress");
increment = 10 / duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent + '%'
startTimer(duration, element);
}
var startTimer = function(duration, element) {
if (percent < 100) {
timer = setTimeout(function() {
advance(duration, element)
}, 100);
}
}
#timeline {
width: 50%;
height: 4px;
background: rgba(0, 0, 0, .3);
margin-top: 27px;
float: left;
margin-left: 10px;
border-radius: 15px;
background-color: blue;
}
/*Grabable Playhead*/
#playhead {
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -10.9px;
background: black;
}
.progress {
height: 5px;
background: black;
transition: width .1s linear;
}
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
<source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div class="progress" id="progress"></div>
<div id="playhead"></div>
</div>
</div>
</div>
It looks like you're missing some key things to make it work
The first thing is that your play button doesn't actually do anything. Try adding an event to handle the clicking of the play button and play the audio
var playButton = document.getElementById('pButton');
playButton.addEventListener('click', e => { audio.play(); });
The second issue I see is that your audio tag is supposed to call initProgressBar but that function doesn't exist.
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
I added a placeholder function for you to fill in. If you don't need this function, remove it from the HTML.
function initProgressBar() {
// TODO: What goes here?
}
After you add the click event in, the audio plays when clicked and the progress bar makes the correct progress. However, your circle doesn't move with the progress. I'm assuming you just haven't gotten that part yet.
var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
var playButton = document.getElementById('pButton');
playButton.addEventListener('click', e => { audio.play(); });
function initProgressBar() {
// TODO: What goes here?
}
audio.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress");
increment = 10 / duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent + '%'
startTimer(duration, element);
}
var startTimer = function(duration, element) {
if (percent < 100) {
timer = setTimeout(function() {
advance(duration, element)
}, 100);
}
}
#timeline {
width: 50%;
height: 4px;
background: rgba(0, 0, 0, .3);
margin-top: 27px;
float: left;
margin-left: 10px;
border-radius: 15px;
background-color: blue;
}
/*Grabable Playhead*/
#playhead {
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -10.9px;
background: black;
}
.progress {
height: 5px;
background: black;
transition: width .1s linear;
}
<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
<source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play">Play</button>
<div id="timeline">
<div class="progress" id="progress"></div>
<div id="playhead"></div>
</div>
</div>
</div>
First of all i have seen many answer in stakeoverflow but none of these helped me!!! I want to start my div from a random position and then it will move. Rather then it shows from a static position and then it comes to a random position and then it start to move. I tried to declare my top and left by javascript in
$( document ).ready(function()
but that does not help
HTML
<div class="ballarea" id="ballarea1">
<div class="circle type" id="ball"></div>
</div>
CSS
.circle{
border-radius: 50%;
border: thin;
border-color: blue;
}
.type {
width: 20px;
height: 20px;
border: 5px solid blue;
position: relative;
}
.ballarea{
width: 300px;
height: 400px;
border: solid black;
overflow: hidden;
position: relative;
}
JavaScript
var i=0;
var j=0;
function ballMove(){
var d=document.getElementById("ball");
var temp=i;
if(i<1)
{
i = Math.floor(Math.random() * (200));
j = Math.floor(Math.random() * (200));
}
for(;i<2+temp;i++,j++)
{
d.style.left=i+"px";
d.style.top=j+"px";
}
//document.getElementById('ball').style.display = 'block';
}
function timeChange()
{
setInterval( ballMove, 500);
}
Now at first it starts from a static position like the following and then it start from a random position. I want to show it from a random position not from a static position
Try hiding it at first, because your script run when your DOM is ready.
<div class="ballarea" id="ballarea1">
<div class="circle type" id="ball" style="display:none"></div>
</div>
Then when your script is running, show it
var i = 0;
var j = 0;
function randomBall(){
var d = document.getElementById("ball");
i = Math.floor(Math.random() * (200));
j = Math.floor(Math.random() * (200));
d.style.left = i+"px";
d.style.top = j+"px";
d.style.display = "block";
}
function ballMove(){
var d=document.getElementById("ball");
i += 2;
j += 2;
d.style.left = i+"px";
d.style.top = j+"px";
}
function timeChange()
{
randomBall();
setInterval( ballMove, 500);
}
I'm having really big problems with canvas code that I'm using only 1 time in the page (in logo) working fine, and that I'm trying to use it as buttons for menu and here is the problem, I don't know really what's im doing wrong, hope some of u help me.
it's the code that I'm using for the logo and is working fine:
HTML CODE:
<html>
<head>
<title>canvas</title>
</head>
<body>
<div id="container">
<div id="logo">
<canvas style="" width="800" id="broken-glass"></canvas>
<h1 style="color: rgba(250, 250, 250, 0.95);" id="logo-title">Canvas</h1>
</div>
<script type="text/javascript">
(function() {
var isCanvasSupported = function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
if( isCanvasSupported() ) {
var canvas = document.getElementById('broken-glass'),
context = canvas.getContext('2d'),
width = canvas.width = Math.min(800, window.innerWidth),
height = canvas.height,
numTriangles = 100,
rand = function(min, max){
return Math.floor( (Math.random() * (max - min + 1) ) + min);
};
window.drawTriangles = function(){
context.clearRect(0, 0, width, height);
var hue = rand(0,360);
var increment = 80 / numTriangles;
for(var i = 0; i < numTriangles; i++) {
context.beginPath();
context.moveTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.globalAlpha = 0.5;
context.fillStyle = 'hsl('+Math.round(hue)+', '+rand(15,60)+'%, '+ rand(10, 60) +'%)';
context.closePath();
context.fill();
hue+=increment;
if(hue > 360) hue = 0;
}
canvas.style.cssText = '-webkit-filter: contrast(115%);';
};
document.getElementById('logo-title').style.color = 'rgba(250, 250, 250, 0.95)';
drawTriangles();
var el = document.getElementById('logo');
el.onclick = function() {
drawTriangles();
};
}
})();
</script>
</div>
</body>
</html>
and it's CSS CODE:
#broken-glass
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
#logo h1
{
text-align: center;
font-weight: 700;
width: 100%;
color: #000;
position: absolute;
left: 0px;
-moz-user-select: none;
cursor: pointer;
margin-top: 27px;
font-size: 63px;
line-height: 1.4;
top: 0px;
margin-bottom: 5px;
text-rendering: optimizelegibility;
font-family: Calibri,"PT Sans","Trebuchet MS","Helvetica Neue",Arial;
}
the big problem comes when i change the id's (#) to classes (.) and the "id" tag to "class" tag in the html, the canvas is overlapped... the text of h1 tag is out of the canvas... and just the hell of problems, can someone tell me what I'm doing wrong?, how to fix it, I'm trying it during hours...
too much thanks in advance!.
you may try putting an !important in every code in your css.
example:
text-align: center !important;
font-weight: 700 !important;
this fixed my problem before, hopefully it will fix yours also.
I am currently working with a jquery plugin for setting my background image. The issue i am having is with the CSS/JQuery making the page in-proportionate. My content lies inside the #container div so I have set its position to absolute(originally was relative). How can I have the content of the page be aligned in the center and keep the properties of a 100% height? EXAMPLE
This is before the jquery plugin- CSS 100% height- EXAMPLE
Jquery Background plugin
<script>
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);
function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
var winwidth = $(window).width();
var winheight = $(window).height();
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
};
})(jQuery)
</script>
CSS related to the issue
#container {
position: relative;
margin: 0 auto;
width: 945px;
background: #f0f0f0;
height: auto!important;
height: 100%;
min-height: 100%;
border-right: 15px solid #000;
border-left: 15px solid #000;
}
.fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
HTML/Inline JS to call function
<img src="images/raven_bg.jpg" alt="" id="background" />
<div id="container">
</div>
<script>
$(window).load(function() {
$("#background").fullBg();
});///this comes right before the closing body tag
</script>
This centers it -
#container {
margin-left: 50%;
left: -488px;
}
it's kind of hacky, but it works.
50% shift (to keep it centered based on width)
half of width, plus border = 478.5 (or 488) to keep it centered in frame. And of course, with "left" only works because it's got position: relative; attached to it