html5——多媒体（三）
自定义进度条
1、video标签是内联块，可以设置宽高，但是需要用大盒子将其包裹起来进行定位
2、小盒子设计成进度条样式，并进行定位
3、进度条样式中的特殊按钮可以用web字体
4、通过点击实现视频的暂停/播放 改变按钮的样式
5、获取视频的总时长，放到totalTime中
6、当视频播放的时候， 动态谁知crrTime的值，并且改变进度条的样式
7、实现全屏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.css">
<style>
* {
padding: 0;
margin: 0;
} figcaption {
text-align: center;
font-size: 40px;
margin: 50px auto;
} .player {
width: 720px;
height: 360px;
margin: 100px auto;
background-color: #000;
position: relative;
} video {
display: block;
margin: 0 auto;
height: 100%;
} .control {
width: 700px;
height: 40px;
position: absolute;
background-color: rgba(63, 141, 56, 0.5);
bottom: 10px;
left: 10px;
border-radius: 10px;
} .switch {
position: absolute;
width: 40px;
height: 40px;
left: 10px;
top: 0;
font-size: 20px;
line-height: 40px;
text-align: center;
} .progress {
position: absolute;
width: 460px;
height: 10px;
left: 60px;
top: 15px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;
} .curr-progress {
width: 0px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
} .time {
position: absolute;
height: 40px;
right: 60px;
top: 0px;
font: 400 12px/40px "simsun";
text-align: center;
color: white;
} .extend {
position: absolute;
top: 0;
right: 5px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<figure>
<figcaption>视频</figcaption>
<div class="player">
<video src="video/movie.mp4"></video>
<div class="control">
<span class="switch icon-play"></span>
<div class="progress">
<div class="curr-progress"></div>
</div>
<div class="time">
<span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
</div>
<!-- 全屏-->
<span class="extend icon-resize-full"></span>
</div>
</div>
</figure>
<script>
var player = document.querySelector(".player");
var video = document.querySelector("video");
var swt = document.querySelector(".switch");
var extend = document.querySelector(".extend");
//通过点击 实现 视频的暂停/播放 改变按钮的样式
swt.onclick = function () {
if (video.paused) {
video.play();
player.style.backgroundImage = "url()";
swt.classList.remove("icon-play");
swt.classList.add("icon-pause");
}
else {
video.pause();
swt.classList.remove("icon-pause");
swt.classList.add("icon-play");
}
}
var totalTime = 0;
var currTime = 0;
//获取视频的总时长，放到totalTime中
video.oncanplay = function (ev) {
totalTime = video.duration;
var h = Math.floor(totalTime / 3600);
var m = Math.floor(totalTime % 3600 / 60);
var s = Math.floor(totalTime % 3600 % 60);
h = h >= 10 ? h : "0" + h;
m = m >= 10 ? h : "0" + m;
s = s >= 10 ? s : "0" + s;
document.querySelector(".total-time").innerHTML = h + ":" + m + ":" + s;
}
video.ontimeupdate = function (ev) {
currTime = video.currentTime;
var h = Math.floor(currTime / 3600);
var m = Math.floor(currTime % 3600 / 60);
var s = Math.floor(currTime % 3600 % 60);
h = h >= 10 ? h : "0" + h;
m = m >= 10 ? h : "0" + m;
s = s >= 10 ? s : "0" + s;
document.querySelector(".curr-time").innerHTML = h + ":" + m + ":" + s;
var xishu = totalTime / currTime;
document.querySelector(".curr-progress").style.width = (460 / xishu) + "px";
}
extend.onclick = function () {
video.webkitRequestFullScreen();
}
</script>
</body>
</html>
html5——多媒体（三）的更多相关文章
- Html5多媒体相关的API---video
Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...
- HTML5 多媒体音视频处理
HTML5 多媒体音视频处理 版权声明:未经博主授权,内容严禁转载 ! 音频处理 - audio HTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的. 不同浏览器在网页上播放音频的 ...
- 三天学会HTML5 ——多媒体元素的使用
目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...
- HTML5 多媒体标签
一.多媒体 embed 标签 embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等.url为音频或视频文件及其路径,可以是相对路径或绝对路径. 语法格式: < ...
- HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）
各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...
- 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- html5多媒体Video/Audio
video: 1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源) 2.常见的音频格式 编码:AAC.MP3 ...
- 用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...
- 初学HTML5系列三：事件
Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...
随机推荐
- 【触发器】MySQL触发器使用详解
MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器在MySQL中,创建触发器语法如下: ...
- 五语言学习系列 C,C++,Objective-C,Java,C# （一）历史
C:由AT&T贝尔实验室的Dennis Ritchie于1972年创建的,是专为开发者设计的语言. C++:在C基础上,1983年又由贝尔实验室的Bjarne Strou-strup推出了C+ ...
- 洛谷—— P1122 最大子树和
https://www.luogu.org/problem/show?pid=1122 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课 ...
- P1009 阶乘之和 洛谷
https://www.luogu.org/problem/show?pid=1009 题目描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=54321. ...
- qscoj Round 1(div 2)
卿学姐OJ……很休闲啊……? A 分析:枚举/exgcd B 分析:栈模拟 弄个栈模拟配对过程,将能够配对的()位置染色,最后最长的一段染色区间就是答案 C 分析:dp f[i][j]表示前i个物品, ...
- - > 网络流（草地排水）
网络流(Dinic(模板)) Drainage Ditches Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- Spring/Maven/MyBatis配置文件结合properties文件使用
使用properties文件也叫注入,比如把一些常用的配置项写入到这个文件,然后在Spring的XML配置文件中使用EL表达式去获取. 这种方式不只Spring可以使用,同样MyBatis也可以使用, ...
- MVC中从控制器到视图的数据传递方法汇总
1.ViewData对象概述ViewData是一种字典集合数据,是"视图基类"和"控制器基类"的属性常见用法是在控制器中写入数据,在视图中读取数据ViewDat ...
- 关于Tomcat的点点滴滴（体系架构、处理http请求的过程、安装和配置、文件夹结构、设置压缩和对中文文件名称的支持、以及Catalina这个名字的由来……等）
总结Tomcat的体系架构.处理http请求的过程.安装和配置.文件夹结构.设置压缩和对中文文件名称的支持.以及Catalina这个名字的由来--等. Tomcat和JVM: 一个Tomcat仅仅会启 ...
- Chrome浏览器扩展开发系列之十四：本地消息机制Native messagin
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报 分类: PPAPI(27) 通过将浏览器 ...