一、效果介绍

给视频添加封面图一般是直接通过video的poster标签来引入图片路径,这样虽然代码非常简洁,点击图片也能直接播放视频.但是这样对封面图的比例有要求,与视频不一致可能会被拉伸,而且在一些浏览器上有时候会出现暂停视频时,封面图又会重新显示,效果适配得不是那么完美.

所以长沙网站建设一般采用另一种方式来添加封面图.使用position属性将图片定位在视频上一层又JavaScript进行控制,当图片被点击时让它和其他元素一起消失,再将视频显示出来播放.

二、效果解析

核心代码如下：

$(function () {
      $('.img-video img').click(function () {
        $(this).hide();  
        $(this).parent().addClass('change');
        var video = $(this).siblings('video')[0];
        if (video) {
          video.play();
        }
      });
    });

通过上述代码可以看出,当鼠标移入图片并点击的瞬间,它就会消失.同时图片的parent父级也就是类名为img-video这个div,会被附加上新的类名"change".在css的预设中,如果拥有这个类名则会将播放按钮的状态由显示切换成隐藏.图片和播放按钮都消失后,视频的本体就显现出来了,最近再通过JavaScript让视频开始播放.这样长沙网站制作想要的"点击即播"交互效果就完成了.

效果完整代码图如下：

三、效果视频展示

四、效果总结

这样制作出来的效果比直接使用poster属性引入的封面图更自由,封面图的比例调整,鼠标移入的交互效果都可以随意添加.而且不管在什么浏览器中,图片被点击隐藏后,不管视频怎么暂停图片也一定不会出现.

以上就是长沙网站开发整理出的视频封面“点击即播”交互效果的制作方法,希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业的发展保驾护航！欢迎来电咨询:0731-84069615。