我正在使用 Reveal Modal ( http://zurb.com/playground/reveal-modal-plugin )仅在访问者第一次访问时触发模式弹出框,使用 jQuery Cookie ( https://github .com/carhartl/jquery-cookie)。
这是模式的代码(在移动设备上显示 GIF):
<div id="myModal" class="reveal-modal">
</div>
<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
var myModal = document.getElementById('myModal');
if(!isMobile) {
// User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
myModal.innerHTML += '<video autoplay>' +
'<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
'<source src="video/LogoOpening.ogg" type="video/ogg"/>' +
'<source src="video/LogoOpening.webm" type="video/webm"/>' +
'</video>' +
'<a class="close-reveal-modal"><div class="button4">Close</div></a>';
} else {
myModal.innerHTML += '<img src="images/ThroughTheYears.gif" alt="Logo History" />' +
'<a class="close-reveal-modal"><div class="button4">Close</div></a>' +
'</div>';
}
</script>
...这是在检查 cookie 后触发模式的 Javascript:
<script>
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 30, path: '/' });
$('#myModal').reveal({
animation: 'fade', //fade, fadeAndPop, none
animationspeed: 500, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
}
});
</script>
所以,问题来了:当我的访客第一次出现时,视频会完美启动并自动播放,就像它应该的那样(类似的动画 GIF 仅在移动设备上播放);但是,视频有声音,并且在随后的访问中,视频会自动播放并且您会听到音频,但模态不会在视觉上触发(模态和视频保持隐藏状态)。
我认为解决方案是以某种方式将视频的静音属性与 cookie 检查 Javascript(确定模式是否触发)相关联,但我不确定如何编写代码。帮助?