HTML5如何实现图片上显示视频的效果呢？

网友解答: 感谢酷米邀请！浏览器支持:Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。 注释：Internet

感谢酷米邀请！

浏览器支持:

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。 注释：Internet Explorer 8 以及更早的版本不支持 标签。

定义和用法

标签定义视频，比如电影片段或其他视频流。

提示和注释

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性:

new : HTML5 中的新属性。

属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。mutedmuted规定视频的音频输出应该被静音。posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。点击视频预览图实现播放或暂停视频

首先要设置video的预览图，这时 中的poster属性很好的完成了这个工作。 关于视频的播放控制需要用到video的dom事件，这里先不详述了，以后有机会再将其详细属性搬运过来。这里主要运用到了play() ；pause()这两个事件。

下面是一个自己这两天写的通过点击视频预览图实现视频播放或暂停

HTML部分：

js部分:

这要是你自己敲的话可能有点费劲了，你的交互要做到哭，最好的就是找(o^)~^/的网站自己搭个玩玩吧，在图片上添加效果，小的GIF没有问题，可以试试去，但是视频我没有尝试过，希望对你有帮助