基于HTML5自定义媒体播放器

最新推荐文章于 2024-06-13 18:23:52 发布

fooooooood

最新推荐文章于 2024-06-13 18:23:52 发布

阅读量2.2k

点赞数 2

分类专栏： Html+CSS 文章标签： HTML5 Video JavaScript CSS 媒体播放器

本文链接：https://blog.csdn.net/Fooooooood/article/details/81288988

版权

Html+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简要说明

显示播放时间、可操控进度条，播放视频是通过拖拽媒体文件到播放器中即可播放。
注：上一曲、下一曲未实现。

素材

这里写图片描述

效果图

这里写图片描述

style.css文件

.mediaplayer {
    height: 350px;
    width: 534px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -267px;
    margin-top: -175px;
    box-shadow: 0px 0px 30px #555555;
    border: 1px solid rgb(153, 153, 153);
}

.video {
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0;
}

.process {
    position: absolute;
    height: 8px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    margin-top: -13px;
    z-index: 2;
    border-radius: 10px;
    display: none;
}

.process span {
    position: absolute;
    height: 100%;
}

.process #process-value {
    border-radius: 10px;
    width: 0px;
    box-shadow: 0px 0px 5px #555;
    background-color: #4d4d4d;
}

.process #process-sel {
    display: none;
    width: 1px;
    background-color: #000;
}

.tooltip {
    position: absolute;
    z-index: 9;
    display: none;
}

.tooltip span {
    position: absolute;
    color: #fff;
    top: -45px;
    font-size: 10px;
    line-height: 1.4em;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    padding: 2px 3px;
    background-color: #8A8A8A;
}

.tooltip span:after,
span:before {
    border: solid transparent;
    content: ' ';
    width: 0px;
    height: 0px;
    position: absolute;
    top: 20px;
}

.tooltip span:after {
    border-width: 5px;
    border-top-color: #8A8A8A;
    left: 13px;
}

.tooltip span:before {
    border-width: 6px;
    border-top-color: #FFFFFF;
    left: 12px;
}

.controls {
    position: absolute;
    text-align: center;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background: #d4d4d4;
}

.controls button {
    height: 100%;
    width: 10%;
    border: none;
    background-color: #00000000;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
}

.controls #video-btn-pre {
    background-image: url(../img/pre.png);
}

.controls #video-btn-pp {
    background-image: url(../img/play.png);
}

.controls #video-btn-next {
    background-image: url(../img/next.png);
}

.controls span {
    color: #555;
    position: absolute;
    top: 20px;
    text-shadow: 1px 1px 1px #AAAAAA;
}

.controls #curtime {
    left: 15px;
}

.controls #duration {
    right: 15px;
}

EventUtil.js文件

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};

DIYVideoPlayer.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIY Video Player</title>
        <script type="text/javascript" src="js/EventUtil.js"></script>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    <body>
        <div class="mediaplayer">
            <div class="video">
                <video id="player" width="534" height="300" poster="img/poster.png">Video player not available.</video>
            </div>
            <div class="process" id="process">
                <span id="process-value"></span>
                <span id="process-sel"></span>
            </div>
            <div class="tooltip" id="tooltip">
                <span id="tooltip-value">00:00</span>
            </div>
            <div class="controls">
                <button id="video-btn-pre" />
                <button id="video-btn-pp" />
                <button id="video-btn-next" />
                <span id="curtime">00:00</span>
                <span id="duration">00:00</span>
            </div>
        </div>
    </body>
</html>

结束语

这是我在学习JavaScript时，利用所学知识综合运用所写，若有错误误导大家，请大家留言沟通，谢谢。

fooooooood

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
基于HTML5自定义媒体播放器

简要说明显示播放时间、可操控进度条，播放视频是通过拖拽媒体文件到播放器中即可播放。注：上一曲、下一曲未实现。 &amp;amp;lt;br&amp;amp;gt;素材效果图 style.css文件.mediaplayer { height: 350px; width: 534px; position: absolute; ...
复制链接

扫一扫

专栏目录