css+jq實現的簡單視訊播放器效果
阿新 • • 發佈：2020-10-22
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> </head> <body> <script src="jquery-1.11.3.min.js"></script> <div class="video-fl"> <video controls="controls" poster="index-video-1.jpg" preload="none" src="index-cp-video.mp4"></video> <span class="video-play"> <img src="video-icon.png" alt=""> </span> </div> <style> .video-fl { float: left; width: 57.3%; position: relative; } .index-video video { width: 100%; height: auto; } .video-play { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; cursor: pointer; } .video-play img { position: absolute; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; cursor: pointer; z-index: 99; display: block; } </style> <script> function videoStop() { var Video = $('.index-video video'); for (var i = 0; i < Video.length; i++) { var element = Video[i]; element.pause(); } } $('.video-play').click(function () { videoStop(); var videos = $(this).siblings('video'); $(this).hide(); videos[0].play(); }) </script> </body> </html>
播放器按鈕下載：