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 ...
随机推荐
- 解决win10磁盘占用过大的问题（亲测有效）
问题:打开任务管理器,经常会发现磁盘占用95%以上,电脑很卡,下面是解决方案 方法: 1.关闭家庭组. (1)搜索服务,找到“HomeGroupListener”服务,右键单击“属性”.在弹出属性界面 ...
- 用Docker创建Nexus
步骤如下: 1. 创建持久化目录 $ mkdir /some/dir/nexus-data && chown -R 200 /some/dir/nexus-data 2. 创建镜像并运 ...
- Stuts2的"struts.devMode"设置成true后，不起作用的解决的方法
不用 <constant name="struts.devMode" value="true" /> 改成 <constant name=& ...
- android混合动画实现
在android开发,我们会常常使用到动画,可是简单的一种动画(如旋转.缩放.渐变.位移等)有时候并不能满足我们项目的要求,这时候就须要运用到混合动画.那么在安卓中是怎样实现一个炫酷的混合动画,以下是 ...
- Angular常用标记
(如果没有特别指明,则所有的HTML元素都支持该标记) (如果没有特别指明,则 AngularJS 指令不会覆盖原生js的指令) 1.数据绑定类: 1.插值语法:{{}} 2.标签内容绑定:ng-bi ...
- PX4/Pixhawk---高速成为开发人员（Windows）
1 高速成为开发人员新手教程(翻译)---官方 1.1 编译环境之版本号控制系统 (1)安装MSysGIT 安装完毕后,配置GIT. 安装注意 安装过程中除了以下一步外,其它的步骤都採用默认安 ...
- ADT 压缩包 R23.0.0
http://pan.baidu.com/s/1qWLjs2w
- CentOS6.5下用Git克隆代码（https方式）
一.首先最好保证GIT是最新版 查看GIT命令 $ git --version 有关git的安装,应该有好多文章介绍.注意更新之后,要重启系统,否则显示的版本号,还是老版本. 二.如果工作环境存在网络 ...
- 异步POST请求解析JSON
异步POST请求解析JSON 一.创建URL NSURL *url = [NSURL URLWithString:@"http://localhost:8080/MJServer/order ...
- 转 一个SMD 0805的LED的电流，电压，亮度关系表
Vf就是led的导通电压. 一个SMD 0805的LED的电流,电压,亮度关系表Vf If(算) 亮度1.74v 0.46mA 做指示灯不刺眼刚 ...