首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5自定义视频播放器源码

Posted in HTML / CSS onJanuary 06, 2020

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;

自定义视频播放器

HTML5自定义视频播放器源码

放图

<!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>

总结

以上所述是小编给大家介绍的HTML5自定义视频播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

HTML5自定义视频播放器源码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 #HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 #HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 #HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 #HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 #HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 #HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 #HTML / CSS
xhunter1.sys(1) 蓝牙(1) 蓝牙耳机(1) 鸿蒙3.0(1) RustDesk(1) 华为(1) 虚拟键盘(1) 鸿蒙(2) HarmonyOS(1) Debian(1)
You might like
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
PHP分享图片的生成方法
2018/04/25 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[04:17]DOTA2完美盛典，rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python类和继承用法实例
2015/07/07 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python模拟实现分发扑克牌
2020/04/22 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Stuart Weitzman欧盟：美国奢华鞋履品牌
2017/05/24 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
材料化学应届生求职信
2013/10/09 职场文书
实习生自荐信范文
2013/11/13 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
村安全生产责任书
2014/08/25 职场文书
个人债务授权委托书
2014/10/17 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js
基于PyQt5制作一个群发邮件工具
2022/04/08 Python