H5 video自定义视频控件
1.自定义效果截图
2.效果源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5 video自定义视频控件</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: #000;
position:relative;
display: inline-block;
color: #fff;
left: 50%;
margin-left: -300px;
}
.controls {
position: absolute;
bottom: 3px;
}
input[type="button"]{
background-color: cornflowerblue;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
#rangebar {
width: 200px;
height: 5px;
border: 1px solid #ccc;
margin-top: 3px;
display: inline-block;
}
#rangebar>p {
width: 0%;
height: 100%;
background-color: blueviolet;
}
#progress {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<video src="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" width="600" height="450" poster="">
您的浏览器不支持 video 标签。
</video>
<div class="controls">
<input type="button" value="播放" id="play"/>
<input type="button" value="暂停" id="pause"/>
<input type="button" value="快进" id="speed"/>
<input type="button" value="快退" id="back"/>
<input type="button" value="静音" id="mute"/>
<input type="button" value="全屏" id="fullscreen"/>
<a href="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" download="广告视频">
<input type="button" value="下载" id="download"/>
</a>
VOICE:<input type="range" id="progress" value="30" min="0" max="100"/>
<br/></br.>视频进度：<div id="rangebar">
<p></p>
</div>
</div>
</div>
<script>
var video = document.getElementsByTagName("video")[0];
play.onclick=function(){
video.play()
}
pause.onclick=function(){
video.pause()
}
speed.onclick=function(){
video.currentTime += 5;
console.log(video.currentTime);
}
back.onclick=function(){
video.currentTime -=5;
console.log(video.currentTime);
}
mute.onclick = function(){
video.muted = true;
progress.value=0;
}
fullscreen.onclick=function(){
video.webkitRequestFullscreen();
}
/* *视频播放进度*
* 获取视频总时长 video.duration
* ........当前播放位置 video.currentTime
* 进度条p的宽度：(video.currentTime/video.duration)*100+'%'
* */
var timer = setInterval(function(){
rangebar.getElementsByTagName("p")[0].style.width=(video.currentTime/video.duration)*100+'%';
},100); //音频大小
progress.onmousemove = function(){
video.volume = this.value/100;
}
</script>
</body>
</html>
H5 video自定义视频控件的更多相关文章
- android--------自定义视频控件（视频全屏竖屏自动切换）
android播放视频也是常用的技术,今天分享一个自定义视频控件,支持自定义控制 UI,全屏播放, 可以实现自动横竖屏切换的控件,跟随手机的位置而,重力感应自动切换横竖屏. 效果图: 代码下载Gi ...
- h5 的video视频控件
h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
- 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK
LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
- cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)
目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...
- (八)ASP.NET自定义用户控件（1）
http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控 ...
- 自定义组合控件，适配器原理-Day31
自定义组合控件,适配器原理-Day31 mobile2.1 主页定义 手机上锁功能 1.弹出设置密码框. 手机下载进度 自定定义控件 控件的属性其实就是控件类一个属性设置属性调用类的set方法方法, ...
- android之视频播放系统VideoView和自定义VideoView控件的应用
Android播放视频,包含系统自带VideoView控件,和自定义VideoView控件,可全屏播放,案例包含了本地视频和网络视频. 1:自定义VideoView控件 2:布局代码 3:Activi ...
- 【Android开发日记】之入门篇（十四）——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- 安卓自定义组合控件--toolbar
最近在学习安卓APP的开发,用到了toolbar这个控件, 最开始使用时include layout这种方法,不过感觉封装性不好,就又改成了自定义组合控件的方式. 使用的工具为android stud ...
随机推荐
- Spark学习之路（十五）—— Spark Streaming 整合 Flume
一.简介 Apache Flume是一个分布式,高可用的数据收集系统,可以从不同的数据源收集数据,经过聚合后发送到分布式计算框架或者存储系统中.Spark Straming提供了以下两种方式用于Flu ...
- Storm 学习之路（三）—— Storm单机版本环境搭建
1. 安装环境要求 you need to install Storm’s dependencies on Nimbus and the worker machines. These are: Jav ...
- 丢给你一个txt并同时获取你shell
丢给你一个txt并同时获取你shell 0x00:回顾 <文本编辑器Vim/Neovim被曝任意代码执行漏洞> 听闻很多人知道这个漏洞,但是有一部分人能复现成功,一部分人复现不出来.这里我 ...
- Atlassian In Action-Jira之指导思想（一）
太上,不知有之:其次,亲而誉之:其次,畏之:其次,侮之.信不足焉,有不信焉.悠兮,其贵言.功成事遂,百姓皆谓"我自然". --<道德经> 研发管理或者系统工具的指导思想 ...
- 计算机以及Python的初始
电脑的介绍 CPU:中央处理器,相当于人类的大脑 内存:暂时储存数据,速度快,造价高,断电后丢失 硬盘:长期储存数据.速度相对慢,造价相对低 操作系统:一个软件,连接计算机硬件和系统中的软件. Pyt ...
- C#实体是什么
实体 一般是指三层结构的数据库访问形式中,用于映射数据表或视图中一条记录的类的实例.例如现有数据表A 内涵 ID int(4) Info(nvarchar 50)两个字段,而有其对应的类 public ...
- 在eclipse中使用git创建本地库，以及托管项目到GitHub超详细教程
关于安装git的教程,由于比较简单,并且网上教程特别多,而且即使不按照网上教程,下载好的windows版本git,安装时候一路默认设置就行. 安装好之后,在桌面上有git图标:右键菜单中有Git Ba ...
- 学Redis这篇就够了
Redis 简介 Redis 优势 Redis 数据类型 string hash list set Zset 小总结 基本命令 发布订阅 简介 实例 发布订阅常用命令 事务 实例 Redis 事务命令 ...
- JsonUtil（基于Jackson的实现）
JsonUtil(基于Jackson的实现) 前言: 其实,我一直想写一个有关Util的系列. 其中有四个原因: Util包作为项目的重要组成,是几乎每个项目不可或缺的一部分.并且Util包的Util ...
- c++学习书籍推荐《面向对象程序设计:C++语言描述(原书第2版)》下载
百度云及其他网盘下载地址:点我 <面向对象程序设计:C++语言描述(原书第2版)>内容丰富,结构合理,写作风格严谨,深刻地论述了c++语言的面向对象编程的各种技术,主要内容包括:面向对象编 ...