DIY视频播放器

最新推荐文章于 2023-08-01 12:04:35 发布
最新推荐文章于 2023-08-01 12:04:35 发布
阅读量167 收藏
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73493686/article/details/127504227
版权 
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></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/o1.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>
    <script src="./js/my.js"></script>
</body>

</html>
var video = document.getElementById('video');//视频
var jpPlay = document.getElementsByClassName('jp-play')[0];//暂停键
var jpPause = document.getElementsByClassName('jp-pause')[0];//开始键
var jpDuration = document.getElementsByClassName('jp-duration')[0];//总的时间
var jpCurrentTime = document.getElementsByClassName('jp-current-time')[0];//当前时间
var jpSeekBar = document.getElementsByClassName("jp-seek-bar")[0]; // 进度条整体
var jpPlayBar = document.getElementsByClassName("jp-play-bar")[0];// 进度条播放的进度条
var jpFullScreen = document.getElementsByClassName('jp-full-screen')[0];//全屏
var jpVolumeBar = document.getElementsByClassName('jp-volume-bar')[0];//音量的总
var jpValue = document.getElementsByClassName('jp-volume-bar-value')[0];//当前音量的值

video.addEventListener('canplay', function () {

    //播放

    jpPlay.onclick = function () {
        video.play();
        this.style.display = 'none';
        jpPause.style.display = 'block';
    }
    //暂停
    jpPause.onclick = function () {
        video.pause();
        this.style.display = 'none';
        jpPlay.style.display = 'block';
    }
    console.log(video.duration);
    //总时间
    jpDuration.innerHTML = formartTime(video.duration);


    //设置当前播放时间
    video.ontimeupdate = function () {
        jpCurrentTime.innerHTML = formartTime(video.currentTime);

        //设置播放进度条
        var scale = video.currentTime / video.duration;
        jpPlayBar.style.width = scale * 100 + '%';

        //点击时播放进度条的位置
        jpSeekBar.onclick = function (e) {
            //进度条的宽度
            e = e || window.event;
            var scale = e.offsetX / jpSeekBar.offsetWidth;
            jpPlayBar.style.width = scale * 100 + '%';
            video.currentTime = scale * video.duration;
        }
    }

    //音量
    jpVolumeBar.onclick = function (e) {
        e = e || window.event;
        var scale = e.offsetX / jpVolumeBar.offsetWidth;
        jpValue.style.width = scale * 100 + '%';
        video.volume = scale;
    }

    //全屏
    jpFullScreen.onclick = function () {
        video.webkitRequestFullScreen();
    }

})
//封装一个时间
function formartTime(time) {
    var m = Math.floor(time / 60);
    m = m >= 10 ? m : '0' + m;
    var s = Math.floor(time % 60);
    s = s >= 10 ? s : '0' + s;

    return `${m}:${s}`;
}

国富1949
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIY视频播放器.html
03-24
不使用controls属性实现视频的播放、暂停、静音、取消静音、全屏、滑块控制音量大小、倍速、减速、快进5秒、快退5秒、进度条、拖动进度条视频会快进至鼠标拖动得地方
flash AS 3.0自定义　DIY　视频播放器
11-03
在Flash AS 3.0环境下，开发一个自定义的DIY视频播放器是一项技术含量较高的工作，涉及到多媒体处理、用户交互以及程序逻辑等多个方面。以下将详细解释这一过程中的关键知识点。 1. **ActionScript 3.0 (AS3) 基础*...
js实现简单的视频播放
weixin_45630548的博客
09-18 7529
功能1：播放暂停切换 思路：准备一个播放的图片和一个暂停的图片； 利用标杆思想，设置一个flag变量，播放的时候将flag设置为false，暂停的时候设置为true，如果flag为true则播放同时改变为播放图片，为false则暂停同时改变为暂停图片 功能2：进度条显示 思路：首先要获取视频播放的当前时间用currentTime()获取，还有视频的总时间，duration()来获取，用document.body.offsetWid...
JS实现视频播放功能
weixin_74535649
08-01 4234
视频播放功能
使用原生js,写个性网页视频播放器
qq_43789598的博客
05-19 457
使用原生js,写个性网页视频播放器
原生JS实现——自定义播放器
小鱼儿~同学
03-26 2280
多媒体 1.常用方法： load() :加载 play():播放 pause():暂停 注：JQ中没有提供对视频播放控件的方式，如果要操作视频播放，必须使用原生的js方法——dom元素 2.常用属性： 1.currentTime：视频播放的当前进度 2.duration：视频的总时间 ...
videojs-player视频播放技术学习
Sunnyztg的博客
06-19 8052
vue3的视频播放器技术
HTML5（软件品牌）-1期 11 教学课件_单元实践_DIY视频播放器.pdf
07-12
在这个“HTML5（软件品牌）-1期 11 教学课件_单元实践_DIY视频播放器.pdf”的教程中，我们将深入探讨HTML5中的音频和视频处理能力，并通过实践来创建一个DIY视频播放器。 一、HTML5音视频基础 1. `<audio>`与`...
播放器DIY播放器DIY播放器DIY
04-29
标题中的“播放器DIY”指的是用户自定义或自制播放器的过程，这通常涉及到软件开发、编程技术，尤其是与媒体播放相关的技术。在这一领域，开发者可能会利用现有的库或者API来构建自己的播放器，实现对音频和视频文件...
功能超强的视频播放器
03-07
【视频播放器】是一种软件应用，专为播放各种格式的视频文件而设计。它具有强大的兼容性，能够处理多种编码标准和容器格式，如MP4、AVI、MKV、WMV等。这类播放器的核心功能是解码和渲染视频流，确保用户能够在计算机...
JS，HTML5实现的网页视频播放器
06-03
有需要播放器的同学可以拿去用，做的非常漂亮哦、1
原生js实现视频播放器_☆往事随風☆的博客
☆往事随風☆的博客
08-20 3189
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
vue调用萤石播放回放提示错误：_this.jSPlugin.JS_Play is not a function
a343981218的专栏
08-06 1341
: _this.jSPlugin.JS_Play is not a function 下载最新的萤石jssdk，把这个ezuikit.js文件放到vue的指定js目录 要想运行播放萤石直播的ez协议，还需要把sdk中的js文件夹，放到vue的public目录（非专业选手）； 修改ezuikit.js416行，把autoPlay这里加定时器延迟加载播放 ...
JavaScript实现视频播放器
热门推荐
小白小白从不日别的博客
11-09 1万+
最终效果： 思路/步骤： 拿到需要操作的元素 通过事件监听视频是否加载完毕 隐藏加载的动画 显示视频 获取视频的总时长 格式化获取到的时间 监听播放按钮的点击 判断当前是否处于播放/暂停状态 切换对应的图标 监听视频播放的进度 同步文本时间 同步进度条 监听进度条的点击事件 获取鼠标当前点击的位置 监听视频是否已经播放完毕 恢复播放时间 恢复图标 恢复时间 恢复进度条 恢复标记 监听全屏按钮的点击 源码： * { margin: 0; p.
js实现一个video标签播放不同的视频
qq_45268602的博客
03-28 4128
在学习html的时候，我们知道，使用video元素提供了播放、暂停和音量控件来控制视频，这里就不展开讨论。 我们今天主要了解的是，如何使用js来实现一个video元素播放不同的视频。话不多说，看代码： <body> <video id="myvideo" width="300" height="auto" controls="controls" muted="m...
js控制视频播放
qq_43654065的博客
08-04 2917
1. HTML页面嵌入视频的两种方式 iframe video 2. js控制视频的播放 首先，iframe中的视频没有找到js可以控制的方法，接下来重点讲一下video控制视频播放的方法。 3. video控制视频播放 参考：https://blog.csdn.net/arvin0/article/details/81665264 ...
videoJs一个页面有多个视频需要加载(遇到的坑)
weixin_41492299的博客
04-23 7668
这个地方只需修改video的ID即可。 废话不多说直接上代码： var videoPlayer = $("#my-video").get(0); if (typeof (videoPlayer) != "undefined") { var myPlayer = videojs('my-video'); myPlayer.dispose(); } 先判断...
JS 用CANVAS自定义VIDEO播放器
qq_31042143的博客
05-06 2586
为了实现客户定制统一风格视频播放器，HTML网页可以借助CANVAS进行自定义VIDEO绘制
JS视频播放
qiuxuemei915的专栏
07-24 6760
1.HTML页面中视频播放支持方法一触发代码： <a href="javascript:void(0)" class="act-video" onclick="playVideo('e01608xXXX')"><strong class="hide">视频</strong></a> //'e01608xXXX' 视频ID弹出框代码： <article class="mod-game-dialo
html DIY视频播放器
最新发布
10-15
可以使用HTML5的video标签来创建DIY视频播放器。首先，需要在HTML文件中添加一个video标签，并设置视频的路径和尺寸： ```html <video src="video.mp4" width="640" height="360"></video> ``` 然后，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值