我正在使用Reveal Modal(http://zurb.com/playground/reveal-modal-plugin)在访问者第一次访问时触发模式弹出框,使用jQuery Cookie(https://github.com/carhartl/jquery-cookie)设置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>
So, here's the issue: 当我的访客第一次出现时,视频会完美地启动并自动播放,就像它应该的那样(类似的动画GIF仅在移动设备上播放);然而,视频有声音,并且在随后的访问中视频自动播放并且您听到音频,但模态不会在视觉上触发(模态和视频保持隐藏) .
我认为解决方案是以某种方式绑定视频's mute attribute to the cookie checking Javascript (which determines whether the modal fires or not), but I'我不知道如何编码 . Help?
1 回答
这样的事情应该有效
...添加额外的cookie检查
model_shown
允许您更改视频是否会自动播放,或者会自动播放但是静音(如果您不希望自动播放,则可以删除它,在这种情况下,静音也可能不是我还添加了controls
,以便用户可以根据需要手动控制音量或播放/暂停希望这有帮助(如果不是你需要的只是评论,我会尽力接近)