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 ...
随机推荐
- Code(poj 17801)
求出一个长度为10^n+n-1的序列,其中包含了所有的n位数(一共10^n个数,从00000(n个0)~10^n-1) /* 典型的欧拉回路题目 对于n=4为密码想要序列最短 那么 1234 234? ...
- zoj——3556 How Many Sets I
How Many Sets I Time Limit: 2 Seconds Memory Limit: 65536 KB Give a set S, |S| = n, then how ma ...
- 3deye-demo-8-14-26-51
源码
- ZOJ 3868 GCD Expectation (容斥＋莫比乌斯反演)
GCD Expectation Time Limit: 4 Seconds Memory Limit: 262144 KB Edward has a set of n integers {a1 ...
- 从理论到实践，全方位认识DNS（理论篇）
对于 DNS(Domain Name System) 大家肯定不陌生,不就是用来将一个网站的域名转换为对应的IP吗.当我们发现可以上QQ但不能浏览网页时,我们会想到可能是域名服务器挂掉了:当我们用别人 ...
- 创建SharePoint 2010 Timer Job
好久没有写博客了. 近期在使用SharePoint 2010中Timer Job的功能,有了一点心得,分享一下. 我个人觉得SharePoint Timer Job和Windows Service或者 ...
- javascript 将中文符号转换成英文符号
javascript 将中文符号转换成英文符号 CreateTime--2018年3月30日09:01:29 Author:Marydon /** * 将中文符号转换成英文符号 */ functi ...
- Codeforces 196 D. The Next Good String
D. The Next Good String time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- Oracle,mysql,sqlserver,postgresql语句几点比較
1.分页 Oracle: SELECT * FROM(SELECT A.*, ROWNUM RN FROM (select T.* from sj_receiptinfo t WHERE t.TAXN ...
- zoj3605 Find the Marble --- 概率dp
n个杯子.球最開始在s位置.有m次换球操作,看到了k次,看的人依据自己看到的k次猜球终于在哪个位置,输出可能性最大的位置. dp[m][k][s]表示前m次操作中看到了k次球终于在s的频率. #inc ...