小编Mur*_*976的帖子
iOS HTML5 音频控件未显示
我正在为我公司的音频播放器进行一些音频支持测试，并展示一系列 HTML5 音频播放器，以了解通过简单的 HTML5 音频播放器支持哪些可用格式。这里的格式没有问题，只是对我正在做的事情的解释。
玩家在 Windows Chrome、Firefox 和 IE11、Mac Chrome、Firefox 和 Safari、Android Internet、Chrome 和 Firefox 上按应有的方式显示......但当涉及到 iPad 和 iPhone 时，这就是暮光之城剧集开始的地方。
每个音频元素中可见的全部内容是 PLAY 按钮和 AirPlay 控件（如果可用）。我查遍了整个网络，每个人都说如果你让元素足够宽，时间擦洗和音量应该就会显示出来。我让玩家拉伸页面的整个宽度，但仍然什么也没有。
这是我的 HTML 和 CSS
HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AUDIO TESTS</title>
</head>
<body>
<div class="player">
<h3>AIFF 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track01.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>AIFF 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track29.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>M4A 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source …推荐指数
解决办法
查看次数
Twitter 卡元标签问题
有问题的网址：https://www.halleonard.com/viewpressreleasedetail.action? releaseid=10261
当您在浏览器和开发人员工具中查看源代码时，您可以看到 Open Graph 和 Twitter 的所有元标记。我检查了 Facebook 调试器，除了一些规范问题之外，我对结果相当满意。
我还将上述 URL 插入第三方 Open Graph 调试器： http://debug.iframely.com/，Open Graph、Twitter 甚至其他标签的所有标签均返回正值。
为什么 Twitter 的卡片验证器会带着一个
INFO: Page fetched successfully
INFO: 9 metatags were found
ERROR: No card found (Card error)
关于如何让 Twitter 正确显示有什么见解吗？
推荐指数
解决办法
查看次数
CSS,JS或JQuery中是否有一种可以根据位置改变文本颜色的方法？
我是一个公司网站的开发人员,该网站的设计包含以下内容:
身体背景渐变,从原色到白色,从上到下,静态.
标题的设定颜色(h1,h2,h3等)设置为白色.
我想遵守这两个标题,当然,标题并不总是位于页面的顶部,特别是如果它们被用作子标题和节标题.
是否有人知道CSS,Javascript或jQuery中的一种方式,它允许文本的颜色根据它在页面上的位置而改变,例如,在顶部,标题是白色的,以对比主要颜色的身体渐变,但是在页面的下方,标题会变为主色,以对比身体渐变的白色？
推荐指数
解决办法
查看次数
MediaElement.js音频播放器 - 在移动设备上有趣的包装
从上图中可以看出,我的移动设备上的音频播放器存在问题.当播放器加载时,它看起来像这样,但是当我点击播放时:
快变!看起来应该如此.
这是我的代码:
HTML
<audio id="audioPlayer001" style="max-width:100%; width: 100%;">
<source src="theFile.mp3" type="audio/mpeg">
</audio>
JS
$('#audioPlayer001').mediaelementplayer();
我最初在音频标签中有preload参数,认为玩这个可能会纠正一些事情,因为玩家在你点击PLAY之前只是不稳定,但没有这样的运气auto, metadata and none没有效果.
推荐指数
解决办法
查看次数
HTML5音频,Web音频API,CORS和Firefox
我一直试图让这个运行正常所以几天没有运气.
我创建了一个自定义音频播放器,可以访问S3亚马逊服务器上的MP3.音频播放器具有由Javascript启用的自定义控件,并且可通过Web Audio API实现Audio Visualizer.
现在我遇到的问题是:在Chrome上运行正常.Safari右边说它不能运行Web Audio API,但音频仍然会播放.在Firefox中,整个事情都会关闭.点击播放......没有.我认为这是一个CORS问题,所以我们在服务器上设置了正确的标题,但仍然没有.但是......如果我停用Web Audio API可视化工具,那么我可以让玩家玩得很好.
http://jsfiddle.net/murphy1976/yqqf7uL1/1/
这是我的jFiddle.我已将音频播放器控件脚本与Visualizer脚本中的注释分开,这样您就可以看到它在Firefox中的工作方式,以及它在Firefox中的工作方式.
我在某处读到,我遇到的这个问题可能是Firefox的一个错误.我只是想确保这样我就可以不停地击打我的头骨了.
我可以在这里打电话给CORS吗？:
<source crossorigin="anonymous" src="audioFiles/35022797.mp3" id="srcMP3" type="audio/mp3">
推荐指数
解决办法
查看次数
CSS3 - 不同HTML元素之间的混合模式
我很清楚答案是什么,但我只想绝对肯定.
我有两个元素,div.glass并div.sound,都包含一个背景图像.是否可以将混合模式设置为每个div,以便它们相互交互？例如:
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url(glass.png) 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url(soundwave.png) 0 0 no-repeat;
z-index: 10;
blend-mode: multiply;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>推荐指数
解决办法
查看次数
Bootstrap Accordion展开/折叠全部无法正常运行
这是打破这个的过程:
- 单击音乐符号
- 单击"展开/全部折叠"
- 单击音乐符号
- 单击"展开/全部折叠"
- 再次单击"展开/折叠"
请注意,音乐符号不会打开备份,即使您应该能够在函数中看到逻辑表明所有面板都已关闭且应该打开.为什么？我究竟做错了什么？
HTML:
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" …html javascript jquery twitter-bootstrap twitter-bootstrap-3
推荐指数
解决办法
查看次数
TypeError:属性'handleEvent'在FIREFOX中不可调用
在来到这里之前我做了谷歌搜索,这可能是一个错误,但我想先得到第二个意见,也许我只是写错了代码.
我正在创建一个带有自定义控件的音频播放器.当我单击PLAY/PAUSE按钮时,出现此错误:
TypeError:属性'handleEvent'不可调用.
我的倒带10秒按钮或我的循环按钮不会发生此错误
HTML:
<audio id="audio" controls style="width:800px;">
<source src="myAudio.mp3" type="audio/mp3">
</audio>
<div id="media-controls">
<button type="button" id="play-pause" class="paused" >PLAY/PAUSE</button>
<button type="button" id="rewind10" >REWIND 10 SECONDS</button>
<button type="button" id="loop" >LOOP</button>
</div>
JS:
var track = document.getElementById('audio');
createControls();
function createControls(){
playPause = document.getElementById("play-pause");
rewindBTN = document.getElementById("rewind10");
loopBTN = document.getElementById("loop");
playPause.addEventListener("click",playPause);
loopBTN.addEventListener("click",loopToggle);
rewindBTN.addEventListener("click",rewindTenSeconds);
}
function playPause(){
if(track.paused){
track.play();
} else {
track.pause();
}
}
function rewindTenSeconds(){
track.currentTime = track.currentTime - 10;
}
function loopToggle(){
if (track.loop == false){
track.loop = true;
} …推荐指数
解决办法
查看次数
将CURDATE()的日期值与完整时间戳字段进行比较
我有一个函数将时间戳值(YYYY-MM-DD HH:MM:SS)放入META_VALUE表的列中META.
我想要做的是比较日期部分(YYYY-MM-DD)META_VALUE是否等于今天(CURDATE()),忽略小时,分钟和秒(HH:MM:SS).
我怎么能做到这一点？
推荐指数
解决办法
查看次数
Jquery如果是hasClass然后是addClass
我知道我可以做到这一点,我只是迷失在等级制度中,需要第二眼看到这一点.
这是我正在使用的结构:
<div class="nav-column">
<ul>
<li><a href="#">Link 01</a>
<div>
<ul>
<li><a href="#">Sublink 01</a></li>
<li><a href="#">Sublink 02</a></li>
<li><a href="#">Sublink 03</a></li>
</ul>
</div>
</li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
</ul>
<div class="home"><h3>Underlying Div</h3></div>
</div>
我希望执行以下操作:当您将鼠标悬停在.nav-column ul li a该可见性上时div.home会关闭.当然会有多个.nav-columns,所以我让它变得动态.
我现在的jQuery是:
if ($('.nav-column li').hasClass('active')){
$(this).parent('.nav-column').sibling('div.home').toggleClass("off");
}
没有给div.home添加任何类.我已经有一个悬停功能的添加和移除类'.active'的.nav-column li
编辑编辑
我看到我的代码犯了一个错误,事实上正确的代码有div.homeOUTSIDEdiv.nav-column
这是正确的层次结构:
<div class="wrapper">
<div class="nav-column">
<ul>
<li><a href="#">Link 01</a>
<div>
<ul>
<li><a href="#">Sublink 01</a></li>
<li><a href="#">Sublink 02</a></li>
<li><a href="#">Sublink 03</a></li>
</ul>
</div>
</li> …推荐指数
解决办法
查看次数