×
热搜词

QQ登录

只需一步，快速开始

使用原生JS写网页视频播放器

标签： 原生jsjs网页播放器
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        and,
        address,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video,
        input,
        textarea,
        select {
            background: transparent;
            border: 0;
            font-size: 100%;
            margin: 0;
            outline: 0;
            padding: 0;
            vertical-align: baseline
        }
 
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block
        }
 
        body {
            line-height: 1
        }
 
        abbr[title],
        dfn[title] {
            border-bottom: 1px dotted;
            cursor: help
        }
 
        blockquote,
        q {
            quotes: none
        }
 
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: none
        }
 
        del {
            text-decoration: line-through
        }
 
        hr {
            background: transparent;
            border: 0;
            clear: both;
            color: transparent;
            height: 1px;
            margin: 0;
            padding: 0
        }
 
        mark {
            background-color: #ffffb3;
            font-style: italic
        }
 
        input,
        select {
            vertical-align: middle
        }
 
        ins {
            background-color: red;
            color: white;
            text-decoration: none
        }
 
        ol,
        ul {
            list-style: none
        }
 
        table {
            border-collapse: collapse;
            border-spacing: 0
        }
 
        a {
            text-decoration: none;
        }
 
        body {
            margin: 0;
            padding: 0;
            background: url(images/bg.jpg) repeat;
        }
 
        .jp-video {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            position: relative;
 
            -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
            background: #000;
        }
 
        .jp-video-360p {
            width: 570px;
            margin: 100px auto;
        }
 
        .jp-video-full {
            width: 480px;
            height: 270px;
            position: static !important;
            position: relative;
        }
 
        .jp-video-full .jp-jplayer {
            top: 0;
            left: 0;
            position: fixed !important;
            position: relative;
            /* Rules for IE6 (full-screen) */
            overflow: hidden;
            z-index: 1000;
        }
 
        .jp-video-full .jp-gui {
            position: fixed !important;
            position: static;
            /* Rules for IE6 (full-screen) */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
 
        .jp-video-full .jp-interface {
            position: absolute !important;
            position: relative;
            /* Rules for IE6 (full-screen) */
            bottom: 0;
            left: 0;
            z-index: 1000;
        }
 
        .jp-interface {
            position: relative;
            width: 100%;
            height: 35px;
 
            background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
            background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
            background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
            background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
            background-image: linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f2f2f2', EndColorStr='#d1d1d1');
 
            -webkit-box-shadow: inset 0px 1px 0px #f7f7f7,
                inset 0px -1px 0px #e2e2e2;
            -moz-box-shadow: inset 0px 1px 0px #f7f7f7,
                inset 0px -1px 0px #e2e2e2;
            box-shadow: inset 0px 1px 0px #f7f7f7,
                inset 0px -1px 0px #e2e2e2;
        }
 
        div.jp-controls-holder {
            clear: both;
            width: 570px;
            margin: 0 auto;
 
            position: relative;
            overflow: hidden;
        }
 
        a.jp-play,
        a.jp-pause {
            width: 40px;
            height: 35px;
            float: left;
            text-indent: -9999px;
            outline: none;
        }
 
        a.jp-play {
            background: url(images/sprite.png) 0 0 no-repeat;
        }
 
        a.jp-pause {
            background: url(images/sprite.png) -40px 0 no-repeat;
            display: none;
        }
 
        #separator {
            background-image: url(images/separator.png);
            background-repeat: no-repeat;
            width: 2px;
            height: 35px;
            float: left;
            margin-top: 7px;
            margin-right: 10px;
        }
 
        .jp-progress {
            background: #706d6d;
 
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
 
            -webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
            -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
            box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
 
            width: 280px;
            height: 10px;
            float: left;
            margin-top: 13px;
        }
 
        .jp-seek-bar {
            width: 0px;
            height: 100%;
            cursor: pointer;
        }
 
        .jp-seeking-bg {
            background: #575555;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
 
        .jp-play-bar {
            background: url(images/play-bar.png) left repeat-x;
            width: 0px;
            height: 10px;
            position: relative;
            z-index: 9999;
 
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
 
        .jp-play-bar span {
            position: absolute;
            top: -3px;
            right: -12px;
 
            background: url(images/handle.png) no-repeat center;
            width: 16px;
            height: 17px;
        }
 
        .jp-current-time,
        .jp-duration {
            font-size: 11px;
            font-family: Arial;
            color: #444444;
            margin-top: 13px;
            float: left;
        }
 
        .jp-current-time {
            float: left;
            display: inline;
        }
 
        .jp-duration {
            float: left;
            display: inline;
            text-align: right;
        }
 
        .jp-video .jp-current-time {
            margin-left: 10px;
        }
 
        .jp-video .jp-duration {
            margin-right: 10px;
        }
 
        .time-sep {
            float: left;
            margin: 13px 3px 0 3px;
 
            font-size: 11px;
            font-family: Arial;
            color: #444444;
        }
 
        .jp-video a.jp-mute,
        .jp-video a.jp-unmute {
            text-indent: -9999px;
            float: left;
 
            height: 35px;
            outline: none;
        }
 
        .jp-mute {
            float: left;
            background: url(images/sprite.png) -80px 0 no-repeat;
            margin-top: 1px;
            margin-left: -10px;
            width: 35px;
        }
 
        a.jp-unmute {
            background: url(images/sprite.png) -115px 0 no-repeat;
            margin-top: 1px;
            margin-left: -13px;
            display: none;
            width: 38px;
        }
 
        .jp-volume-bar {
            float: left;
            margin-top: 13px;
            margin-right: 10px;
            overflow: hidden;
            width: 70px;
            height: 10px;
            cursor: pointer;
 
            background: #706d6d;
 
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
 
            -webkit-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
            -moz-box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
            box-shadow: inset 0px 1px 4px rgba(0, 0, 0, .4),
                0px 1px 0px rgba(255, 255, 255, .4);
        }
 
        .jp-volume-bar-value {
            background: rgba(112, 109, 109, 1);
            width: 0px;
            height: 10px;
            position: relative;
            min-width: 11px;
        }
 
        .jp-volume-bar-value span {
            position: absolute;
            top: 0px;
            right: 0px;
 
            background: url(images/volume.png) no-repeat center;
            width: 11px;
            height: 10px;
        }
 
        .jp-full-screen {
            background: url(images/sprite.png) -150px 0 no-repeat;
            float: left;
            width: 40px;
            height: 35px;
            text-indent: -9999px;
            margin-left: -10px;
            outline: none;
        }
 
        .jp-restore-screen {
            background: url(images/sprite.png) -150px 0 no-repeat;
            float: left;
            width: 40px;
            height: 35px;
            text-indent: -9999px;
            margin-left: -15px;
            outline: none;
 
        }
 
        .box {
            width: 500px;
            margin: 0 auto;
            position: relative;
        }
 
        #video {
            width: 100%;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <video id="video">
            <!-- <source src="video/video.webm" /> -->
            <source src="video/downloadVideo(1).MP4">
        </video>
        <div class="jp-gui">
            <div class="jp-interface">
                <div class="jp-controls-holder">
                    <!--play and pause buttons-->
                    <a href="javascript:;" class="jp-play" tabindex="1" style="display: block;">play</a>
                    <a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a>
                    <span class="separator sep-1"></span>
                    <!--progress bar-->
                    <div class="jp-progress">
                        <div class="jp-seek-bar" style="width: 100%;">
                            <div class="jp-play-bar" style="width: 0%;"><span></span></div>
                        </div>
                    </div>
                    <!--time notifications-->
                    <div class="jp-current-time" style="padding: 0 2px 0 5px;">00:00</div>
                    <span class="time-sep">/</span>
 
                    <div class="jp-duration" style="padding: 0 5px 0 2px;">00:00</div>
                    <!--<span class="separator sep-2"></span>-->
 
 
                    <!--mute / unmute toggle-->
                    <!--<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>-->
                    <!--<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a>-->
 
                    <!--volume bar-->
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value" style="width: 90%;"><span class="handle"></span></div>
                    </div>
                    <!--<span class="separator sep-2"></span>-->
 
                    <!--full screen toggle-->
                    <a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a>
                    <!--<a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"-->
                    <!--style="display: none;">restore screen</a>-->
 
                </div>
                <!--end jp-controls-holder-->
            </div>
            <!--end jp-interface-->
        </div>
    </div>
</body>
 
</html>
<script src="js/index.js"></script>



[JavaScript] 纯文本查看 复制代码
var video = document.getElementById('video') //mp4
var jp_play = document.getElementsByClassName('jp-play')[0]; //播放按钮
var jp_pause = document.getElementsByClassName('jp-pause')[0]; //暂停按钮
var jp_seek_bar = document.getElementsByClassName('jp-seek-bar')[0]; //视频进度条
var jp_play_bar = document.getElementsByClassName('jp-play-bar')[0]; //视频进度条按钮
var jp_duration = document.getElementsByClassName('jp-duration')[0]; //视频总时长
var jp_current_time = document.getElementsByClassName('jp-current-time')[0]; //视频已加载时长
var jp_volume_bar = document.getElementsByClassName('jp-volume-bar')[0]; //音量进度条
var jp_volume_bar_value = document.getElementsByClassName('jp-volume-bar-value')[0]; //音量进度条按钮
var jp_full_screen = document.getElementsByClassName('jp-full-screen')[0]; //全屏
video.addEventListener('canplay', function () {
    // 1、视频播放
    jp_play.addEventListener('click', function () {
        video.play(); //视频播放方法
        jp_play.style.display = 'none';
        jp_pause.style.display = 'block';
    });
    // 2、视频暂停
    jp_pause.addEventListener('click', function () {
        video.pause(); //视频暂停方法
        this.style.display = 'none';
        jp_play.style.display = 'block';
    });
    //3、获取视频的总播放时长
    jp_duration.innerHTML = formatT(video.duration);
    //4、执行timeupdate (时间更新这个方法)
    video.addEventListener('timeupdate', function () {
        // 4.1 获取当前时间
        jp_current_time.innerHTML = formatT(video.currentTime)
        // 4.2 已经播放了多少时间
        var timer = video.currentTime / video.duration;
        // 4.3 设置视频进度条
        jp_play_bar.style.width = timer * 100 + '%';
    })
    // 5、点击 播放进度条改变播放速度
    jp_seek_bar.addEventListener('click', function (e) {
        e = e || window.event; //获取当前的实时事件
        // offset 距离父元素的点
        var scale = e.offsetX / this.offsetWidth;
        // 5.1正在播放的进度条
        jp_play_bar.style.width = scale * 100 + '%';
        // 5.1正在播放的进度条的实时时间
        jp_current_time.innerHTML = formatT(scale * video.duration);
        // 当前视频的播放进度
        video.currentTime = scale * video.duration;
    })
 
    // 6、音量进度条
    jp_volume_bar.addEventListener('click', function (e) {
        e = e || window.event;
        var scale = e.offsetX / this.offsetWidth;
        jp_volume_bar_value.style.width = scale * 100 + 'px';
        video.volume = scale;
        console.log(scale)
    })
    // 7.全屏幕
    jp_full_screen.addEventListener('click', function () {
        video.webkitRequestFullScreen();
    })
});
//封装时间函数
function formatT(time) {
    var m = Math.floor(time / 60); //分 
    m = m > 9 ? m : '0' + m;
    var s = Math.floor(time % 60); //秒
    s = s > 9 ? s : '0' + s;
    // return m + ':' + s;
    return `${m}:${s}`;
}


效果图：
QQ截图20220906193046.png



度仙门网 - 论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与度仙门网享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和度仙门网的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、度仙门网管理员和版主有权不事先通知发贴者而删除本文

帖子地址： 

玄元一墨

写了 246 篇文章，拥有下品灵石 9544 枚，中品灵石 11421 枚，上品灵石 10002 枚，被 4 人关注

1
举报 收藏
欢迎访问度仙门网！请在论坛右上角的个人设置中修改你的个性签名！
踩踩
回复

使用道具

评论

 使用高级模式，上传图片！
您需要登录后才可以回帖 登录 | 立即注册
B Color Link Quote Code Smilies

成为第一个吐槽的人

Archiver|手机版|小黑屋|度仙门 |鄂ICP备2022010715号-1

Copyright © 2018-, Duxian studio.

返回顶部