我正在使用以下代码在页面上实现HTML5视频
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
这很好用,嵌入在FF,Safari和Chrome的页面上.我喜欢什么,因为这个视频没有控制,并且意味着嵌入在没有边框的页面中(视频中的白色BG)是要有一个图像代替视频.
如果无法使用元素渲染视频,我想将图像作为后备.我看过以下帖子:html5视频后备建议(没有闪存)开始讨论.但不确定这些答案是否是我所需要的.
我的直觉告诉我,我可以让JQuery检测视频功能,如果不支持视频,那么写出一些显示图像的HTML.但是我想看看是否有更简单的东西.
我一直在这里寻找答案,谷歌等等,似乎无法解决这个问题.
我有一张ID为#pin01的图片.这是地图上的一个图钉,我在div中制作动画,登陆地图图像(想想谷歌地图).
我的JQuery非常棒,是这样的:
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
我的HTML如下:
<img src="images/pin_blue.png" id="pin01" />
动画效果很好,引脚会消失,然后就可以很好地落到地图上了.我想要的是,它从div的顶部定位305px后反弹,所以当它在地图上时,它会在结束时稍微反弹.我以为我会用这个效果:
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
我认为最终的代码会是这样的:
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
这导致弹跳,但它返回到针的原始起始位置,而不是保持305px运动.我尝试放置一个顶部:效果,这不起作用.
我尝试过组合,嵌套这些等等,似乎没有任何工作.
如果有人有任何其他想法,很想知道如何使其正常运作.我认为这是一个简单的调整,似乎无法弄明白.
解
删除:
$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);
用以下答案中的单行代替两者:
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
解决了地图上弹跳一次的问题.
为了添加一些淡入淡出功能,我写了如下:
$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' …