自定義播放器

時間 2019-11-09

標籤自定義播放简体版

原文原文鏈接

1、自定義視頻播放器的主要API（更多能夠查看參考手冊）

①屬性javascript

controls：若是出現該屬性，則向用戶顯示控件，好比播放按鈕。每一個瀏覽器中的播放控件都不太同樣，但用途都同樣，均可以控制開始和結束，跳到新位置和調節音量
autoplay：若是出現該屬性，則視頻在就緒後立刻播放。若是不設置autoplay屬性，必須是用戶單擊播放按鈕纔會播放音頻文件。
loop：loop：(循環播放)告訴瀏覽器在音頻到達末尾時，再從頭開始從新播放
preload：auto、mete、none：告訴瀏覽器如何下載音頻
duration：返回當前音頻/視頻的長度（以秒計）
paused：設置或返回音頻/視頻是否暫停
currentTime：設置或返回音頻/視頻中的當前播放位置（以秒計）
ended：返回音頻/視頻的播放是否已結束

②方法css

play()：開始播放音頻/視頻
pause()：暫停當前播放的音頻/視頻

③事件html

oncanplay：當文件就緒能夠開始播放時運行的腳本（緩衝已足夠開始時）
ontimeupdate：當播放位置改變時（好比當用戶快進到媒介中一個不一樣的位置時）運行的腳本。
onended：當媒介已到達結尾時運行的腳本（可發送相似「感謝觀看」之類的消息）。

2、使用圖標插件Font-Awesome

Font Awesome提供了可縮放的矢量圖標，可使用CSS所提供的全部特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。
使用.：能夠下載文件引入，也可使用CDN

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Font Awesome圖標使用只須要使用CSS前綴 fa ，再加上圖標名稱。 Font Awesome是爲使用內聯元素而設計的。一般使用 <i> ，由於它更簡潔。但實際上使用 <span> 才能更加語義化。
更多說明能夠參考官網的介紹

3、功能實現

利用HTML+CSS製做一個本身的播放控件條，而後定位到視頻最下方
視頻加載loading效果
播放、暫停
總時長和當前播放時長顯示
播放進度條
全屏顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義視頻播放器</title>
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/player.css">
</head>
<body>
    <figure>
        <figcaption>視頻播放器</figcaption>
        <div class="player">
            <video src="images/1.mp4"></video>
            <div class="controls">
                <a href="javascript:;" class="switch fa fa-play"></a>
                <div class="progress">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
                <div class="timer">
                    <span class="current">00:00:00</span>/<span class="total">00:00:00</span>
                </div>
                <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
            </div>
        </div>
    </figure>
    <script src="js/jquery.min.js"></script>
    <script src="js/player.js"></script>
</body>
</html>

HTML

body{
    padding: 0;
    margin: 0;
    font-family: "microsoft yahei","Helvetica",simhei,simsun,sans-serif;
    background-color: #f7f7f7;
}
a{
    text-decoration: none;
}
figcaption{
    font-size: 24px;
    text-align: center;
    margin: 20px;
}
.player{
    width: 1280px;
    height: 720px;
    margin: 0 auto;
    border-radius: 4px;
    background: #000 url("../images/1.gif") center/300px no-repeat;
    position: relative;
    text-align: center;
}
video{
    display: none;
    height: 100%;
    margin: 0 auto;
}
/* 全屏操做後,自帶的控制欄會顯示,在顯示的時候隱藏 */
video::-webkit-media-controls{
    display: none !important;
}
.controls{
    width: 1240px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    margin-left: -620px;
    bottom: 5px;
    z-index: 10000000000;
    opacity: 1;
}
.player:hover .controls{
    opacity: 1;
}
/* 播放/暫停 */
.controls .switch{
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 11px;
    left: 11px;
}
/* 全屏按鈕 */
.controls .expand{
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 11px;
}
/* 進度條 */
.progress{
    width: 1030px;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #555;
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 45px;
}
/* 播放進度 */
.progress .line{
    width: 0px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.progress .bar{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
/* 時間 */
.timer{
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 1080px;
    top: 11px;
    color: #fff;
    font-size: 14px;
}

css

$(function () {
    // 獲取須要操做的DOM元素,特別注意:多媒體相關的api是DOM元素提供的
    var $video = $("video");
    var video = $video[0];
    var $total = $(".total");
    var $switch = $(".switch");
    var $line = $(".line");
    var $current = $(".current");
    var $expand = $(".expand");
    var $bar = $(".bar");
    var formatTime = function (time) {
        var h = Math.floor(time / 3600);
        var m = Math.floor(time%3600/60);
        var s = Math.floor(time%60);
        return (h>=10?h:"0"+h) + ":" + (m>=10?m:"0"+m) + ":"+ (s>=10?s:"0"+s);
    };
    // 1.加載效果,總時長顯示
    video.oncanplay=function(){
        $video.show();
        // 總時長獲取
        $total.html(formatTime(video.duration));
    }
    // 2.播放功能,暫停功能
    $switch.on("click",function(){
        // 判斷當前的播放狀態
        if($switch.hasClass("fa-play")){
            // 播放
            video.play();
            // 暫停按鈕
            $switch.removeClass("fa-play").addClass("fa-pause");
        }else{
            // 暫停
            video.pause();
            // 播放按鈕
            $switch.addClass("fa-play").removeClass("fa-pause");
        }

    });
    // 3.播放中進度條顯示,當前播放時間的顯示
    video.ontimeupdate=function(){
        $current.html(formatTime(video.currentTime));
        var ratio=video.currentTime/video.duration;
        var p=ratio*100+'%';
        $line.css("width",p);
    };
    // 4.全屏/取消全屏
    $expand.on("click",function(){
        if($expand.hasClass("fa-arrows-alt")){
            // 全屏操做
            console.log("1");
            video.webkitRequestFullScreen();
            // 改按鈕,全屏按鈕
            $(this).removeClass("fa-arrows-alt").addClass("fa-compress");
        }else{
            console.log("2");
            //取消全屏
            document.webkitCancelFullScreen();
            // 改按鈕,取消按鈕
            $(this).addClass("fa-arrows-alt").removeClass("fa-compress");
        }
    });
    // 5.躍進功能
    $bar.on("click",function(e){
        // 獲取點擊的位置和進度條寬度的比例,經過比例去計算播放時間
        var width=$bar.width();
        var place=e.offsetX;
        var time=place/width*video.duration;
        // 設置
        video.currentTime=time;
        // 觸發播放時間更改事件,必須視頻加載完成的時候才能看到效果
    });
    // 6.播放完畢重置功能
    video.onended=function(){
        video.currentTime=0;
        // 播放按鈕
        $switch.addClass("fa-play").removeClass("fa-pause");
    }
})

4、效果展現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。