一、实现效果
点击图片播放视频
二、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/video.css"> <style> .video-box { position: relative; } .video-box video { display: inline-block; vertical-align: baseline; } .video-box .video-img { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 9999; background: url(images/pbanner.jpg) no-repeat; background-size: 100% 100%; cursor: pointer; } .video-box .video-introduce { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 999999; } </style> </head> <body> <div class="video-box"> <video id="video" autoplay="autoplay" controls="controls" style="50%;height:510px"> <source src="video/zm-video-9.mp4" type="video/mp4"> </video> <div class="video-img"></div> </div> </body> </html> <script src="fancybox/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(".video-img").click(function() { $(this).hide(); $("#video")[0].play(); }) </script>
三、借鉴