自定义播放器

一、自定义视频播放器的主要API（更多可以查看参考手册）

①属性

controls：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量
autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。
loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放
preload：auto、mete、none：告诉浏览器如何下载音频
duration：返回当前音频/视频的长度（以秒计）
paused：设置或返回音频/视频是否暂停
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
ended：返回音频/视频的播放是否已结束

②方法

play()：开始播放音频/视频
pause()：暂停当前播放的音频/视频

③事件

oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

二、使用图标插件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> 才能更加语义化。
更多说明可以参考官网的介绍

三、功能实现

利用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");
    }
})

四、效果展示

posted @ 2018-07-03 01:59 澎湃_L 阅读(490) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

澎湃_L

自定义播放器

一、自定义视频播放器的主要API（更多可以查看参考手册）

二、使用图标插件Font-Awesome

三、功能实现

四、效果展示

公告