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 ...
随机推荐
- 对象和变量的并发访问synchronized解析以及死锁分析排查
一.synchronized java并发编程中存在“非线程安全"问题.“非线程安全"是指发生在多个线程对同一个对象中的实例变量并发访问时,产生的”脏读“现象,使用synchron ...
- STL源代码剖析(二) - 迭代器与traits技法
提要 先看一段用迭代器的代码: int a[] = {1, 2, 3, 4, 5}; vector<int> v1( a, a+5); vector<int>::iterato ...
- java web项目优化记录：优化考试系统
考试系统在进行压力測试时发现,并发量高之后出现了button无反应.试题答案不能写到数据库的问题,于是针对这些核心问题,进行了优化. 数据库方面: Select语句:Select * from TEB ...
- Fedora下搭建LAMP开发环境
LAMP是Linux + Apache + MySQL +PHP/Python的缩写,是一组常用来搭建动态网站服务器的开源软件.它们本身都是各自独立的程序,但是因为开源并且常放在一起使用,所以拥有了越 ...
- Codeforces 91C Ski Base 加边求欧拉回路数量
题目链接:点击打开链接 题意: 给出n个点m条无向边的图 開始图里没有边.每次加一条边,然后输出图里欧拉回路的条数. 思路: We will count the number of ski bases ...
- oninput 中文输入
使用 input 监听 input 中文输入,会被每次输入的字母打断,下面就解决这个问题 $('input') .off() .on('input',function(){ if($(this).pr ...
- JPA学习笔记（13）——查询缓存
使用hibernate的查询缓存 运行下面代码: String jpql = "FROM User u WHERE u.id = ?"; Query query = entityM ...
- android Activity初次的启动的时候播放声音
代码例如以下: private MediaPlayer mMediaPlayer; mMediaPlayer = new MediaPlayer(); mMediaPlayer = MediaPlay ...
- luogu3959 宝藏 搜索+剪枝
题目大意 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏.但是 ...
- Hadoop 的使用
hadoop:hadoop启动:./sbin/start-dfs.shhadoop关闭:./sbin/stop-dfs.shbin文件用于在HDFS创建数据HDFS 中创建用户目录:./bin/hdf ...