jquery實現--自定義視訊播放器
阿新 • • 發佈：2018-12-16
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <div class="vContainer"> <video id="myVideo"> <!-- <source src="https://www.youtube.com/watch?v=iOznP_eVSi0"> --> <source src="./video/1.mp4" type="video/mp4"> </video> <div class="caption">我自己的播放器</div> <div class="control"> <div class="top"> <div class="progress"> <span class="timeBar"></span> </div> <div class="time"> <span id="currentTime">00:00</span> <span>/</span> <span id="duration">00:00</span> </div> </div> <div class="bottom"> <div class="button play" id="playBtn"></div> <div class="button stop" id="stopBtn"></div> <div class="button text selected" id="speed1Btn">x1</div> <div class="button text" id="speed3Btn">x3</div> <div class="volume"> <span class="volumeBar"></span> </div> <div class="button sound" id="soundBtn"></div> </div> </div> <div class="loading"></div> </div> <script src="./index.js"></script> </body> </html>
style.css
body{ margin: 0; padding: 0; } .vContainer{ width: 640px; height: 360px; margin: 30px auto; position: relative; overflow: hidden; background-color: #dedede; } .caption{ position: absolute; top: 0px; left: 0px; width: 100%; padding: 10px; font-size: 20px; font-weight: bold; color: #cccccc; background: #1f1f1f; z-index: 1; } .control{ position: absolute; bottom: 0px; left: 0px; width: 100%; color: #ccc; background: #1f1f1f; z-index: 1; } /* 控制條頂部 */ .control .top{ height: 11px; border-bottom: 1px solid #404040; padding: 1px 5px; background-color: #1f1f1f; } .control .top .progress{ width: 85%; height: 10px; position: relative; float: left; cursor: pointer; background-color: #404040; border-radius: 5px; } .control .top .progress .timeBar{ height: 100%; position: absolute; top: 0; left: 0; display: block; border-radius: 5px; z-index: 3; background-color: #f9d43a; width: 0px; } .control .top .time{ width: 15%; float: right; text-align: center; line-height: 12px; font-size: 0px; } .control .top .time{ font-size: 11px; } /* 控制條底部 */ .control .bottom{ clear: both; background-color: #1f1f1f; } .control .bottom .button{ float: left; width: 32px; height: 32px; padding: 0px 5px; cursor: pointer; } .control .bottom .play{ background: url("./img/play.png") no-repeat 7px 2px; } .control .bottom .pause{ background: url("./img/pause.png") no-repeat 7px 2px; } .control .bottom .stop{ background: url("./img/stop.png") no-repeat 7px 2px; } .control .bottom .sound{ background: url("./img/sound.png") no-repeat 7px 2px; } .control .bottom .mute{ background: url("./img/mute.png") no-repeat 7px 2px; } .control .bottom .text{ font-size: 16px; font-weight: bold; line-height: 32px; text-align: center; color: #777; } .control .bottom .selected{ color: #fff; } .control .bottom .sound, .control .bottom .mute{ float: right; } /* 控制條聲音控制條 */ .control .bottom .volume{ position: relative; cursor: pointer; float: right; width: 70px; height: 10px; background: #404040; margin-top: 10px; margin-right: 10px; } .control .bottom .volume .volumeBar{ display: block; width: 35px; height: 100%; position: absolute; left: 0; top: 0; background: #eee; z-index: 2; } /* loading */ .loading{ position: absolute; width: 54px; height: 55px; left: 50%; top: 50%; margin-left: -27px; margin-top: -27px; z-index: 1; background: url("./img/loading.gif") no-repeat 0px 0px; }
index.js
(function($) { var video = $("#myVideo"); //計算時間 var timeFormat = function(seconds) { var minite = Math.floor(seconds / 60); if(minite < 10) { minite = "0" + minite; } var second = Math.floor(seconds % 60); if(second < 10) { second = "0" + second; } return minite + ":" + second; } // 播放和暫停功能 var playAndPause = function() { if(video[0].paused || video[0].ended) { video[0].play(); $("#playBtn").removeClass("play").addClass("pause"); } else { video[0].pause(); $("#playBtn").removeClass("pause").addClass("play"); } } //滑鼠移入移除效果 var showTitleAndControl = function(shouldShow) { if(shouldShow) { $(".control").stop().animate({'bottom' : 0}, 500); $(".caption").stop().animate({'top' : 0}, 500); } else { $(".control").stop().animate({'bottom' : -50}, 500); $(".caption").stop().animate({'top' : -50}, 500); } } // 視訊暫停 var stopVideo = function() { video[0].pause(); updateProgress($('.progress').offset().left); $('#playBtn').removeClass("pause").addClass("play"); } // 播放速率 var playSpeed = function (speed) { if(speed == 1) { $("#speed1Btn").addClass("selected"); $("#speed3Btn").removeClass("selected"); } else if (speed == 3) { $("#speed1Btn").removeClass("selected"); $("#speed3Btn").addClass("selected"); } video[0].playbackRate = speed; } // 進度條可拖拽 var enableProgressDrag = function () { var progressDrag = false; $(".progress").on('mousedown', function (e) { progressDrag = true; updateProgress(e.offsetX); }); $(document).on('mouseup', function (e) { if(progressDrag) { progressDrag = false; updateProgress(e.offsetX); } }); $(document).on('mousemove', function (e) { if(progressDrag) { updateProgress(e.offsetX); } }); } // 更新進度條 var updateProgress = function(x) { var progress = $(".progress"); var percent = 100 * x / progress.width(); if(percent > 100) { percent = 100; } if(percent < 0) { percent = 0; } $(".timeBar").css('width', percent + '%'); video[0].currentTime = video[0].duration * percent / 100; } video.on("loadedmetadata", function() { // 讓視訊充滿整個父容器 video.width($(".vContainer").width()); video.height($(".vContainer").height()); showTitleAndControl(false); //顯示時長和時間 $("#currentTime").html(timeFormat(0)); $("#duration").html(timeFormat(video[0].duration)); //滑鼠移入和移出 $(".vContainer").hover(function () { // over showTitleAndControl(true); }, function () { // out showTitleAndControl(false); } ); // 播放暫停 $("#playBtn").on("click", playAndPause); // 結束播放 $("#stopBtn").on("click", stopVideo); // 播放速率 $("#speed1Btn").on("click", function () { playSpeed(1); }); $("#speed3Btn").on("click", function () { playSpeed(3); }); enableProgressDrag(); }) // 進度條跟隨 video.on("timeupdate", function () { var currentTime = video[0].currentTime; var duration = video[0].duration; var percent = 100 * currentTime / duration; $(".timeBar").css("width", percent + "%"); $("#currentTime").html(timeFormat(currentTime)); }); //讓loading消失 video.on("canplay", function () { $(".loading").fadeOut(100); }); })(jQuery);
