点击此链接： The first prt scr you can see play and mute buttons.
点击此链接： The second prt scr I can't see background image, but still javascript working!
我的背景图片在哪里？如何删除＆＃34;元素＆＃34;属性？
element {
background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}
button#mutebtn {
background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}
答案 0 :(得分：0)
答案 1 :(得分：0)
您有两个选择：
在你的css文件中使用！important：
button#mutebtn {
background: transparent url("../images/unmute.png") repeat scroll 0% 0% !important;
}
（它被认为是避免的最佳做法！尽可能重要。）
注意：您无法在样式表中找到element。这是在html文件中直接/内联实现的css。
我为你做了一个例子，检查this小提琴！
答案 2 :(得分：0)
如果您在HTML中向var data = { "prop1": "val1", "prop2": "val2" };
var dest = 'path/to/dest/config.json';
var s = require('stream');
var stream = new s.Readable();
stream.push(JSON.stringify(data)); // stream apparently does not accept objects
stream.push(null); // no idea why this is needed, but it is
return stream
.pipe() // whatever you need
.pipe($.fs.createWriteStream(dest));
添加内联样式，它将在检查器中显示为#mutebtn。
检查您的HTML，如果您需要使用这样的内联样式：
element{}注意背景属性的URL，这似乎可以从CSS文件中获得，但是从HTML文件中我认为它应该是不同的路径，通常没有初始<button id="mutebtn" style="background...."></button>
。
换句话说，删除HTML中的内嵌样式，或将其中的路径更改为："../"
答案 3 :(得分：0)
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
vid.addEventListener("timeupdate",seektimeupdate,false);
playbtn.addEventListener("click",playPause,false);
mutebtn.addEventListener("click",vidmute,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
volumeslider.addEventListener("change",setvolume,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(../images/pause.png)";
} else {
vid.pause();
playbtn.style.background = "url(../images/play.png)";
}
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(../images/mute.png)";
} else {
vid.muted = true;
mutebtn.style.background = "url(../images/unmute.png)";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
playbtn.style.background = "url(../images/pause.png)";
playbtn.style.background = "url(../images/play.png)";div#video_player_box {
width: 100%;
background: #000;
}
div#video_controls_bar {
padding: 10px;
color: #CCC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
button#playpausebtn {
background: url(../images/pause.png);
width: 30px;
height: 30px;
display: inline-block;
border: 0px none;
cursor: pointer;
opacity: 0.5;
}
button#playpausebtn:hover {
opacity: 1;
}
input#seekslider {
display: inline-block;
width: 100%;
padding: 2px;
}
input#volumeslider {
display: inline-block;
width: 80px;
padding: 2px;
}
button#mutebtn {
background:url(../images/unmute.png);
width: 30px;
height: 30px;
border: 0px none;
cursor: pointer;
opacity: 0.5;
/*--style text button
font-weight: bold;
padding: 0.5em;
border-radius: 15px;
border: 1px solid #A7A7A7;
background-color: #068EA2;
background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#mutebtn:hover {
opacity: 1;
}
button#fullscreenbtn {
background: url(../images/fullscreen.png);
width: 30px;
height: 30px;
border: 0px none;
cursor: pointer;
opacity: 0.5;
float:right;
/*--style text button
font-weight: bold;
padding: 0.5em;
border-radius: 15px;
border: 1px solid #A7A7A7;
background-color: #068EA2;
background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#fullscreenbtn {
opacity: 1;
}
input[type='range'] {
-webkit-appearance: none !important;
background: #000;
border: #666 1px solid;
height: 2px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #FFF;
height:10px;
width:10px;
border-radius:100%;
cursor:pointer;
}<div id="video_player_box">
<video id="my_video" autoplay>
<source src="media/echo-hereweare.mp4">
</video>
<div id="video_controls_bar">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="50" step="1">
<span id="curtimetext"></span> / <span id="durtimetext">
</span><button id="fullscreenbtn">[ ]</button>
</div>
<!--end video_controls_bar -->
</div>
<!--end video_player_box -->