video对象

兼容情况:

safari浏览器不支持webm格式

Chrome浏览器支持webm格式

ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的

Firefox(火狐浏览器)支持ogv格式的视频


兼容性写法

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

HTML5视频(自定义视频播放器源码)的更多相关文章

  1. 易语言.开源(vip视频播放器源码)

    下载链接:https://pan.baidu.com/s/1ta1Ig3LOiOka-kr5xB18kw

  2. 项目源码--IOS自定义视频播放器

    下载源码 技术要点: 1. 视频播放器功能的实现 2. 视频文件的扫描与管理 3. Ipad UI的实现 4.源码详细的中文注释 ……. 详细介绍: 1. 视频播放器功能的实现 源码基于MediaPl ...

  3. 一步步实现windows版ijkplayer系列文章之二——Ijkplayer播放器源码分析之音视频输出——视频篇

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  4. HTML5实现的视频播放器01

    HTML5实现的视频播放器   什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放 ...

  5. android文件管理器源码、斗鱼直播源码、企业级erp源码等

    Android精选源码 文件清理管理器 自定义水平带数字的进度条以及自定义圆形带数字的进度条 利用sectionedRecyclerViewAdapter实现分组列表的recyclerView源码 流 ...

  6. 一步步实现windows版ijkplayer系列文章之三——Ijkplayer播放器源码分析之音视频输出——音频篇

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  7. 32.修改IK分词器源码来基于mysql热更新词库

    主要知识点, 修改IK分词器源码来基于mysql热更新词库     一.IK增加新词的原因 在第32小节中学习到了直接在es的词库中增加词语,来扩充自已的词库,但是这样做有以下缺点: (1)每次添加完 ...

  8. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  9. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

随机推荐

  1. POJ_2752_KMP

    http://poj.org/problem?id=2752 求字符串的字串,使前缀后缀都为这个字串,按字母数量排序输出数量. 用了KMP的未优化的next数组. #include<iostre ...

  2. Codeforces 1156E Special Segments of Permutation(启发式合并)

    题意: 给一个n的排列,求满足a[l]+a[r]=max(l,r)的(l,r)对数,max(l,r)指的是l到r之间的最大a[p] n<=2e5 思路: 先用单调栈处理出每个点能扩展的l[i], ...

  3. MySQL中遍历查询结果的常用API(c)

    本中所使用的table: MySQL中的错误处理函数 unsigned int mysql_errno(MYSQL *mysql) const char *mysql_error(MYSQL *mys ...

  4. expect 运行脚本文件 执行postgres数据库操作

    #!/bin/bash /usr/bin/expect << EOF spawn /usr/local/pgsql/bin/.sh expect "*postgres:" ...

  5. 杭电-------2032杨辉三角(C语言写)

    #include<stdio.h> ][] = { }; void init() { int i, j; ; i < ; i++) { a[i][] = ; a[i][i] = ; ...

  6. 回到未来:Smalltalk 编程系统

    Smalltalk 是19世纪70年代由 Alan Kay 设计的,第一个以面向对象(Object-Orientation)为主要范式的编程语言 1.Smalltalk 具有大量首创的特性,深刻影响了 ...

  7. JS中this的几种情况

    1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...

  8. MySQL 什么是事务?

    该文为< MySQL 实战 45 讲>的学习笔记,感谢查看,如有错误,欢迎指正 一.事务简介 事务就是为了保证一组数据库操作,要么全部成功,要么全部失败. 事务是在引擎层实现的,也就是说并 ...

  9. Linux报错:rm: cannot remove 'xxx': Is a directory

    rm: cannot remove 'xxx': Is a directory表示这个文件是无法remove移除的,因此我们不能仅使用rm来将这个文件夹进行删除,需要使用: rm -rf 命令则可以将 ...

  10. 使用QT显示OpenCV读取的图片

    目录 1. 概述 2. 实现 2.1. 代码 2.2. 解析 3. 结果 1. 概述 OpenCV自带了一部分常用的GUI功能,但是更多的图像处理功能需要其他GUI框架来辅助实现,这里通过QT来显示O ...