关于后续访问的静音HTML5视频
关于后续访问的静音HTML5视频
提问于 2013-09-06 18:15:37
我使用显示模式(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>...and这里是在检查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 (这决定模式是否触发)联系起来，但我不知道如何编写代码。帮助？
回答 1
Stack Overflow用户
发布于 2013-09-07 00:56:23
像这样的东西应该能起作用
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，以便用户可以手动控制音量或播放/暂停(如果需要)
希望这能帮上忙(如果不是你需要的话，就评论一下，我会尽量接近你的)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18664080
复制相关文章
相似问题
腾讯云开发者
