堆栈内存溢出
  繁体   English   中英

切换javascript代码在IE11中不起作用

[英]Toggle javascript code not working in IE11

 原文  2016-01-26 04:28:05  0   1    javascript/ html5/ toggle/ internet-explorer-11

问题描述

我是Java和html5的新手。 我正在开发一个在Chrome上效果很好的html5音频播放器。 除了切换javascript外，它也可以在IE11中使用。 在IE中单击时，播放或静音按钮图框都不会掉出。 我已经查看了该站点和其他地方的示例，但无法弄清楚。 这是我所有的代码： 

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0}
div#audio_controls_bar{ box-sizing: border-box; border-style: solid; border-color: black; border-width: 3px; border-radius: 10px 10px 10px 10px; width:550px; height: 60px; background: #333; padding-top:2px; padding-left:10px;color:#CCC;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
button#playpausebtn{
    background:url(Pause_30.png);
    border:none;
    width:33px;
    height:30px;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer;
    opacity:0.7;

}
button#mutebtn{
    background:url(Sound.png);
    border:none;
    width:33px;
    height:30px;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer;
    opacity:0.7;

}
input#seekslider{ width:180px; height:8px}
input#volumeslider{ width: 80px; height:8px;padding_left:10px;}
input[type=range] {
  -webkit-appearance: none;
  position: relative;
  transform: translateY(-10%);
    cursor:pointer;
  width: 100%;



}
button#playpausebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border:#666 1px solid;
    height:4px;

}

button#mutebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border:#666 1px solid;
    height:4px;

}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #3071a9;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {

  border: none;
  height: 36px;
  width: 16px;
   background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}
</style>
<script>
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.getElementsByClassName("curtimetext");
    durtimetext = document.getElementsByClassName("durtimetext");
    mutebtn = document.getElementById("mutebtn");
    volumeslider = document.getElementById("volumeslider");

    // Add event listeners
    playbtn.addEventListener("click",playPause,false);
    seekslider.addEventListener("change",vidSeek,false);
    vid.addEventListener("timeupdate",seektimeupdate,false);
    mutebtn.addEventListener("click",vidmute,false);
    volumeslider.addEventListener("change",setvolume,false);

}
window.onload = intializePlayer;
function playPause(){
    if(vid.paused){
        vid.play();
        playbtn.style.background = "url(Pause_30.png";
    } else {
        vid.pause();
        playbtn.style.background = "url(Play_30.png";
    }
}



function vidSeek(){
    var seekto = vid.duration * (seekslider.valueAsNumber / 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[0].innerHTML = curmins+":"+cursecs;
    durtimetext[0].innerHTML = durmins+":"+dursecs;
}
function vidmute(){
    if(vid.muted){
        vid.muted = false;
        mutebtn.style.background = "url(Sound.png";
    } else {
        vid.muted = true;
        mutebtn.style.background = "url(Sound_mute.png";
    }
}
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();
    }
}
</script>
</head>
<body>

  <div id="audio_controls_bar">
      <audio id="my_video" width="550" height="60" autoplay>
        <source src="mod2_newkc2_nov12.mp3">
      </audio>
    <button id="playpausebtn"></button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1" >
    <span style="padding-left:10px" class="curtimetext"> 00:00</span> / <span style="padding-right:10px"class="durtimetext">00:00</span>
    <button id="mutebtn"></button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
  </div>

</body>
</html>

任何帮助将不胜感激。

谢谢。 -肖恩

1 个解决方案

解决方案1
 1  2016-01-26 04:33:24

您的所有背景url引用都缺少) 

playbtn.style.background = "url(Pause_30.png";
mutebtn.style.background = "url(Sound_mute.png";

应该 

playbtn.style.background = "url('Pause_30.png')";

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript代码可在IE11中运行，但不能在Chrome中运行 javascript 无法在 IE11 中工作 JavaScript代码可在其他浏览器上运行，但不能在IE11上运行，为什么？ Javascript play（）函数在ie11中不起作用 Webpack JavaScript在IE11上不起作用 Linkedin JAVASCRIPT SDK无法在IE11中使用 Javascript：追加方法不适用于 IE11 Javascript-forEach（）循环不适用于IE11 在 javascript 代码中检查 IE11 classList.toggle（“ show”）在IE11中不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM