[英]Mute HTML5 video on subsequent visit
我使用的显示模态( http://zurb.com/playground/reveal-modal-plugin )到断火只在访问者的首次访问一个模式弹出框,设置使用jQuery曲奇(饼干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(确定是否触发模式)相关联,但是我不确定如何编写代码。 救命?
这样的事情应该工作
if (!isMobile) {
// User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
if ($.cookie('modal_shown') == null) {
myModal.innerHTML += '<video autoplay controls>'
} else {
myModal.innerHTML += '<video autoplay muted controls>'
}
myModal.innerHTML += '<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
....
....
'</video>' +
...添加cookie的额外检查model_shown
可以更改视频是否将自动播放,或者将自动播放但被静音(如果您不希望其不自动播放,则可以将其删除,在这种情况下,静音也可能不会被自动播放)我还添加了controls
以便用户可以根据需要手动控制音量或播放/暂停
希望这会有所帮助(如果不是您所需要的只是评论,我会尽力与您取得联系)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.