javascript - Defining syles in video shadow DOM(s) -
any suggestions on how append style of input "range" element when shadow of html 5 video element. understanding normal method in example 1. if styling track.
what hope achieve color 1. left of thumb showing complete, color 2 right show pending video.
example 1.
input[type=range]::-webkit-slider-runnable-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px; }
the method target video shadow dom a prefix of video:: however, following dosen't work pointers appreciated.
video::input[type=range]::-webkit-slider-runnable-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px; }
any solutions either css, html, or pure javascript appreciated...
building off vitorino's fiddle, closest workaround come 1) add timeupdate
event listener calculated percentage of video played, 2) set percentage background multiple gradients updating css in <style>
element, so:
html:
<style id="ugh"></style> <video width="400" controls> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> browser not support html5 video. </video>
js:
var run = 0; var ss = document.getelementbyid("ugh"); document.getelementsbytagname("video")[0].addeventlistener("timeupdate", function(){ run = this.currenttime / this.duration * 100; ss.textcontent = 'video::-webkit-media-controls-timeline { background-image: linear-gradient(to right, red 0%, red ' + run + '%, yellow ' + run + '%, yellow 100%);' });
however, doesn't access buffer amount (the darker gray on default slider), , circle still blue. couldn't figure out way change color, turn gray box adding:
video::-webkit-media-controls-timeline { -webkit-appearance: none; }
Comments
Post a Comment