当前位置：移动技术网 > IT编程>网页制作>Html5 > HTML5视频（自定义视频播放器源码）

HTML5视频（自定义视频播放器源码）

2020年01月06日 | 移动技术网IT编程 | 我要评论

video对象

兼容性写法

    <video controls>
        <source src="data/demo.ovg">
        <source src="data/demo.mp4">
        <source src="data/demo.webm">
        您的浏览器不支持，请升级您的浏览器
    </video>

video 标签 width height autoplay muted
poster带有预览图（海报图片）的视频播放器

    <video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>

选中video标签

        var videonode = document.getelementbyid('myvideo');

src控制视频的来源

        videonode.src = 'data/demo.ogv';

手动设置控件 controls

        videonode.controls = true;

设置视频音量

        videonode.volume = 0.5;

currenttime当前播放时间
快进效果

        gogogo.onclick = function(){
            videonode.currenttime = videonode.currenttime + 3;
        };

暂停 pause()

        stopnode.onclick = function(){
            videonode.pause();
        };

播放play()

        playnode.onclick = function(){
            videonode.play();
        };

load 刷新播放器的事件

        reloadnode.onclick = function(){
            videonode.src = 'data/demo.mp4';
            videonode.load();
        };

canplay 视频已经加载好可以开始播放了

        videonode.addeventlistener('canplay',function(){
            console.log('视频已经加载好 可以开始播放了');
        });

requestfullscreen 让video标签变成全屏
videonode.webkitrequestfullscreen();
videonode.mozrequestfullscreen();

        fullscreennode.onclick = function(){
            if(videonode.webkitrequestfullscreen){
                videonode.webkitrequestfullscreen();
            }
            else if(videonode.mozrequestfullscreen){
                videonode.mozrequestfullscreen();
            }
        };

volumechange 当音量更改时

        videonode.onvolumechange = function(){
            console.log('volumechange');
        };

声音随机更改

        volumenode.onclick = function(){
            videonode.volume = math.random();
        };

seeking 当用户开始拖动进度条时就会触发的事件

        var seekingnum = 0;
        videonode.onseeking = function(){
            console.log('seeking...');
            seekingnum++;
            seeking.innerhtml = seekingnum;
        };

seeked 当用户对视频的进度条并且已经完成操作时会触发的事件

        var seekednum = 0;
        videonode.onseeked = function(){
            console.log('seeked...');
            seekednum++;
            seeked.innerhtml = seekednum;
        };

timeupdate监听视频播放的状态

        videonode.addeventlistener('timeupdate',function(){
            // 总时长，以分钟：秒的形式显示
            let alltime = parseint(videonode.duration/60)+':'+parseint(videonode.duration%60);
            // 当前时间，以分钟：秒的形式显示
            let nowtime = parseint(videonode.currenttime/60)+':'+parseint(videonode.currenttime%60);
            timenode.innerhtml = nowtime+'/'+alltime;
        })

readystate 视频的准备信息

        console.log(videonode.readystate);
        settimeout(function(){
            console.log(videonode.readystate);
        },500);

playbackrate 查看或设置视频的一个播放速度

        console.log(videonode.playbackrate)

rate设置倍速

        //rate设置0.5倍速
        ratenode.children[0].onclick = function(){
            videonode.playbackrate = 0.5;
        };
        //rate设置1倍速
        ratenode.children[1].onclick = function(){
            videonode.playbackrate = 1;
        };
        //rate设置2倍速
        ratenode.children[2].onclick = function(){
            videonode.playbackrate = 2;
        };

loop的设置

        loopnode.onclick = function(){
            if(videonode.loop == false){
                this.innerhtml = '循环';
                videonode.loop = true;
            }
            else{
                this.innerhtml = '不循环';
                videonode.loop = false;
            }
        };

src返回的数据

        console.log('src='+videonode.src);

currentsrc返回的数据

        console.log('currentsrc='+videonode.currentsrc);

监听ended事件

        videonode.addeventlistener('ended',function(){
            console.log('视频播放结束了');
            videonode.play();
        })

查看视频的网络状态

        console.log(videonode.networkstate)

手动设置控件 controls

        videonode.controls = true;

手动设置静音 muted

        videonode.muted = true;

自定义视频播放器
放图

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;} 
.outernode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}  
.outernode .videonode{
    width: 540px;height: 305px;float: left;
    background: black;
}     
.outernode .controlsnode{
    width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.gif) repeat-x;
}

.outernode .controlsnode .playnode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/playnode.png) no-repeat;cursor: pointer;
}
.outernode .controlsnode .pausenode{
    float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
    background: url(images/pause.png) no-repeat;cursor: pointer;
}


.outernode .controlsnode .loadnode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;}
.outernode .controlsnode .loadnode .linenode{
    width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
    background: url(images/line_bg.png) repeat-x;

}
.outernode .controlsnode .loadnode .linenode .lineright{
    width: 2px;height: 100%;position: absolute;right: 0;top: 0;
    background: url(images/line_r_bg.png) no-repeat;
}

.outernode .controlsnode .loadnode .loadleft{
    height: 100%;width:3px ;position: absolute;left: 0;top: 0;
    background: url(images/left_bg.png) no-repeat;z-index: 4;
}
.outernode .controlsnode .loadnode .loadright{
    height: 100%;width:3px ;position: absolute;right: 0;top: 0;
    background: url(images/right_bg.png) no-repeat;
}
.outernode .controlsnode .loadnode .crlnode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}

.outernode .controlsnode .timenode{
    float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outernode .controlsnode .timenode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outernode .controlsnode .volumenode{
    width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
    background: url(images/volume_bg.png);
}
.outernode .controlsnode .volumeline{
    height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
    background: url(images/volumeline_bg.png) repeat-x;position: relative; 
}
.outernode .controlsnode .volumeline .v_left{
    width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat;
}
.outernode .controlsnode .volumeline .v_right{
    width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat;
}
.outernode .controlsnode .volumeline .v_dragnode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;}
.outernode .controlsnode .fullnode{
    width:15px;height:17px;float: left;margin: 6px 0 0 35px;
    background: url(images/full_bg.png) no-repeat;cursor: pointer;
    transition: 0.7s;
}
.outernode .controlsnode .fullnode:hover{
    background: url(images/full_hover_bg.png) no-repeat;
}

    </style>

</head>
<body>
    <!-- 最外层的元素 -->
    <div class='outernode'>
        <!-- video元素 -->
        <video class='videonode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
        <!-- 控制器的元素 -->
        <div class='controlsnode'>
            <!-- 控制播放暂停的按钮 -->
            <div class='playnode'></div>
            <!-- video的进度条 -->
            <div class='loadnode'>
                <div class='loadleft'></div>
                <div class='loadright'></div>
                <!-- 拖动进度条的按钮 -->
                <div class='crlnode'></div>
                <!-- 真正的进度条 -->
                <div class='linenode'>
                    <div class='lineright'></div>
                </div>
            </div>
            <!-- 时间的元素 -->
            <div class='timenode'>
                <span class='now'>00:00</span>
                <span> - </span>
                <span class='all'>4:30</span>
            </div>
            <!-- 声音的标志 -->
            <div class='volumenode'></div>
            <!-- 声音的条 -->
            <div class='volumeline'>
                <div class='v_left'></div>
                <div class='v_right'></div>
                <div class='v_dragnode'></div>
            </div>
            <!-- 全屏的按钮 -->
            <div class='fullnode'></div>
        </div>
    </div>
<script type="text/javascript">
    //播放暂停的控制
    //playnode 播放器按钮
    //videonode 播放器
    //playbln 控制暂停播放的布尔值
    //fullnode 全屏按钮
    //nownode 当前时间
    //allnode 视频的全部时间
    //linenode 当前的进度条
    //crlnode 进度条按钮
    //loadnode 进度条外面的元素
    var playnode = document.getelementsbyclassname('playnode')[0],
        videonode = document.getelementsbyclassname('videonode')[0],
        fullnode = document.queryselector('.fullnode'),
        nownode = document.queryselector('.now'),
        allnode = document.queryselector('.all'),
        linenode = document.queryselector('.linenode'),
        crlnode = document.queryselector('.crlnode'),
        loadnode = document.queryselector('.loadnode'),
        vdragnode = document.queryselector('.v_dragnode'),
        playbln = true;

    //播放、暂停的事件
    playnode.onclick = function(){
        //传统的通过布尔值去改变classname的方法
        playbln = !playbln;
        if(playbln == false){
            this.classname = 'pausenode';
            videonode.play();

        }
        else{
            this.classname = 'playnode';
            videonode.pause();
        }
    };

    //全屏按钮的事件
    fullnode.onclick = function(){
        if(videonode.webkitrequestfullscreen){
            videonode.webkitrequestfullscreen();
        }
        else if(videonode.mozrequestfullscreen){
            videonode.mozrequestfullscreen();
        }
        else{
            videonode.requestfullscreen();
        }
    };

    //解决最开始时间的nan的问题
    videonode.addeventlistener('canplay',function(){
        var needtime = parseint(videonode.duration);
        var  s = needtime%60;
        var  m = parseint(needtime / 60);
        var timenum = todou(m)+':'+todou(s);
        allnode.innerhtml = timenum;
    },false);

    //解决 时间不足10 的问题
    function todou(time){
        return time<10?'0'+time:time;
    }

    //当视频播放的时候 需要当前的时间动起来
    videonode.addeventlistener('timeupdate',function(){
        //目前的 百分比进度
        linenode.style.width = videonode.currenttime/videonode.duration*100+'%';
        crlnode.style.left = linenode.offsetwidth - 8.5 + 'px'

        var needtime = parseint(videonode.currenttime);
        var  s = needtime%60;
        var  m = parseint(needtime / 60);
        var timenum = todou(m)+':'+todou(s);
        nownode.innerhtml = timenum;
    },false);

    //声音的拖拽按钮
    vdragnode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientx - this.offsetleft;
        document.onmousemove = function(e){
            var ev = e || event;
            var needx = ev.clientx - l;
            var maxx = vdragnode.parentnode.offsetwidth - 2.5;

            needx = needx < -2.5 ? - 2.5 : needx;
            needx = needx > maxx ? maxx : needx;
            //计算0 - 1
            var lastvolume = (vdragnode.offsetleft + 2) / vdragnode.parentnode.offsetwidth ;
            videonode.volume = lastvolume < 0 ? 0 : lastvolume;

            vdragnode.style.left = needx + 'px';
        };
        document.onmouseup = function(e){
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
    //拖拽进度条按钮
    crlnode.onmousedown = function(e){
        var ev = e || event;
        var l = ev.clientx - this.offsetleft;
        videonode.pause();

        document.onmousemove = function(e){
            var ev = e || event;
            var needx = ev.clientx - l;
            var maxx = loadnode.offsetwidth - 8.5;

            needx = needx < -8.5 ? -8.5 : needx;
            needx = needx > maxx ? maxx : needx;
            crlnode.style.left = needx + 'px';
            linenode.style.width = (crlnode.offsetleft+9)/loadnode.offsetwidth*100 + '%';


        };
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            videonode.currenttime = videonode.duration * (crlnode.offsetleft+9)/loadnode.offsetwidth;
            if(playbln == false){
                //console.log(1);
                playnode.classname = 'pausenode';
                videonode.play();
            }
            else{
                //console.log(2);
                playnode.classname = 'playnode';
                videonode.pause();
            }
        };
        return false;
    };

</script>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

HTML Canvas 绘制实时动态折线图

本文使用HTML的Canvas元素绘制实时动态折线图。参考于这篇博客HTML5 Canvas动画折线图可动... [阅读全文]
程序员快速成长的心法与方法论

一、心法1、谦逊谦逊是一切的根基，谦逊是自我觉知的能力；谦逊并不是温顺或者毫无抱负，而是放低身段，向一切有益... [阅读全文]
“你必须具有读取权限才能查看此对象属性”解决方法

“你必须具有读取权限才能查看此对象属性”解决方法解决出处引文微软回答步骤1：首先选中一个分区，然后点击右键——属... [阅读全文]
uniapp中使用sqlite模块2——使用SQLite

详情移步官方文档：http://www.html5plus.org/doc/zh_cn/sqlite.htmls... [阅读全文]
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签

阿树有点儿话HI ~你好呀生活也就总是这样呀，一日三餐，每天重复走着同一条路线，做着差不多的事情。也许会有人经历... [阅读全文]
HTML5文件的基本结构和W3C标准

第一章 HTML5文件的基本结构和W3C标准任务1 实现页面注册信息验证功能1.1 HTML5文件的基本结构和为... [阅读全文]
Recharts动态设置y轴的最大值最小值

问题描述：根据父组件传来的值来动态设置柱状图Y轴的刻度线使用配置属性：domain当 y 轴是数值轴时，通过这个... [阅读全文]
html5风扇源码

夏天太热，需要风扇，来一段Html5风扇源码；<!DOCTYPE html><html>... [阅读全文]
vscode插件配置大全

1.open in browser打开单独的html文件必备插件使用方法：shift+alt+b选择打开的浏览器... [阅读全文]
AssetBundle 如何打包AB包和调用AB包内资源

打包设置首先代码打包AB很简单，我们把它放在我们项目工程的根目录下using UnityEditor;using... [阅读全文]

网友评论


验证码：

HTML5视频（自定义视频播放器源码）

2020年01月06日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论