html5--视频播放器实例
html5--视频播放器实例
总结：
1、相对定位和绝对定位的区别，两者都是浮起来了
2、属性和方法都是有对象的，搞清楚对象之后，属性和方法就很好用了，我们一般可以用document.getElementById("video");来获取对象
3、在外部修改html属性的时候，innerHTML和style是相对的，前者关注内容，后者关注样式
4、我们可以用event来获取刚刚操作的那个对象，然后来修改它的样式和内容，用法是event.target，例如event.target.innerHTML=';'
5、视频的前进或者后退都是通过视频对象的currentTime属性来实现的
6、视频设置声音直接操作视频对象的volume对象即可
7、进度条的响应?window.onload方法+timeupdate事件，相对于每秒更新一次Progress
video.addEventListener('timeupdate',Progress)
8、offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标
var w=parseInt(document.getElementById("probar").style.width)
video.currentTime = video.duration * (event.offsetX /w);
这段代码时进度条改变之后更新video
9、截屏功能则只需要操作canvas的对象的drawImage方法即可，因为这个方法可以操作视频
10、下面是一波css属性，把这些单词记住就ok了
outline: none;去掉button的边框
border-radius: 10px;边框圆角
opacity: 0;设置为透明
font-family:'Webdings';设置字体
display: block;display属性
cursor: pointer;设置鼠标样式
background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);线性渐变
animation: keframe 1s linear infinite;关键帧动画
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>8-33 课堂演示</title>
<style type="text/css">
/*父亲设置定位属性，孩子好偏移*/
#main{
width: 800px;height: 600px;
position: relative;
}
/*都是按钮*/
button{
outline: none;
}
/* 播放控件区*/
.bar{
border:1px solid;
position: relative;
width: 100%;height: 15%;
background: #ccc;
border-radius: 10px;
opacity: 0;
}
.bar:hover{
opacity: 1;
}
#playorpause,.next,.back,.muted0,#vol,.pic{
display: block;background: orange;
border-radius: 48px;cursor: pointer;position: absolute;
font-family:'Webdings';
font-size:48px;color: green;
}
#playorpause{
bottom: 20%;left: 45%;
}
.next{
bottom: 20%;left: 55%;
}
.back{
bottom: 20%;left: 35%;
}
.muted0{
width: 48px; height:48px;
font-size: 42px;
bottom: 23%;right: 25%;
}
#vol{
width: 20%;
bottom: 40%;right: 2%;
}
.pic{
bottom: 20%;left: 20%;
background: white;
}
#progress{
position: absolute;
height: 15px;
width: 10px;
border-radius: 10px; background-size: 30px 20px;
background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);
animation: keframe 1s linear infinite;
}
#probar{
background:rgba(10,30,10,0.3);
height:15px;
}
@keyframes keframe
{
0% {background-position: 0 0}
100% {background-position: 60px 10px}
}
</style>
</head>
<body>
<div id="main">
<video id="video" src="qsmy.mp4" controls="controls" width="800"></video>
<div class="bar">
<div id="probar" style="width: 800px;"><div id="progress"></div></div>
<button id="playorpause" onclick="PlayOrPause()">4</button>
<button class="next" onclick="Next()">8</button>
<button class="back" onclick="Prev()">7</button>
<button class="muted0" onclick="Muted()">X</button>
<input id="vol" type="range" min="0" max="1" step="0.1" onchange="Volume()">
<button class="pic" onclick="CatchPicture()"><img src="xj2.png" alt="" width="48"></button>
</div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script>
var video = document.getElementById("video");
//播放和暂停
function PlayOrPause(e)
{
if(video.paused)
{
//1、style怎么来
//2、event怎么用
//3、innerHTML和style是并列的，一个设置内容一个设置样式
video.play();
event.target.innerHTML=';'
event.target.style.color='red'
}
else{
video.pause();
event.target.innerHTML='4'
event.target.style.color='green'
}
}
//前进和后退
function Prev(){
video.currentTime-=60;
}
function Next(){
video.currentTime+=60;
}
//设置静音
function Muted(){
if (video.muted) {
//从静音到非静音的操作
video.muted=false;
event.target.innerHTML='X'
event.target.style.background='orange'
document.getElementById('vol').value=video.volume }else{
//设置静音操作
video.muted=true;
event.target.innerHTML='x'
event.target.style.background='white'
document.getElementById('vol').value=0;
}
}
//设置声音
function Volume(){
//event的target对象
video.volume=event.target.value;
}
//进度条
function Progress(){
var progress=document.getElementById('progress')
progress.style.width=(video.currentTime/video.duration)*100+'%'
}
window.onload=function(){
var progress=document.getElementById("progress");
var probar=document.getElementById("probar");
probar.addEventListener('click',progress_click)
video.addEventListener('timeupdate',Progress)
}
function progress_click(){
var progress=document.getElementById("progress");
var w=parseInt(document.getElementById("probar").style.width)
//alert(event.offsetX/w) //offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
if(event.offsetX){
video.currentTime = video.duration * (event.offsetX /w);
}
} function CatchPicture(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.drawImage(video,0,0,canvas.width,canvas.height);
}
</script>
</body>
</html>
html5--视频播放器实例的更多相关文章
- 打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- html5视频播放器 二 （功能实现及播放优化）
样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...
- html5视频播放器 一 （改写默认样式）
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...
- HTML5播放器实例
鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...
- Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- 一个html5视频播放器
具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...
- 很震撼的HTML5视频播放器，电影院的感觉
效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...
- html5视频播放器
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Hive扩展功能(八)--表的索引
软件环境: linux系统: CentOS6.7 Hadoop版本: 2.6.5 zookeeper版本: 3.4.8 主机配置: 一共m1, m2, m3这三部机, 每部主机的用户名都为centos ...
- node 第三方包学习
时间格式化 moment var moment = require('moment'); moment().format();
- [Windows Server 2012] Discuz X3安全设置
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★[护卫神·V课堂]是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:Discu ...
- HDU_1160_FatMouse's Speed_dp
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- linux虚拟主机的三种方法
虚拟主机虚拟主机是将一台(或者一组)服务器的资源(系统资源.网络带宽.存储空间等)按照一定的比例分割成若干相对独立的“小主机”的技术.每一台这样的“小主机”在功能上都可以实现WWW.FTP.Mail等 ...
- 强大而优雅，API 研发管理 EOLINKER 新版正式发布！
EOLINKER 于2019年3月3日正式发布新版本!该版本大幅强化各个产品的功能.着重优化了全站的用户交互体验,并且EOLINKER AMS 产品正式更名为 EOLINKER API Studio ...
- Linux：SSH连接原理
1,SSH开启 2,执行:ssh username@ip地址 例如ssh root@10.1.1.1 3,查看cat ./ssh/kown_hosts 里面就保存了10.1.1.1的公钥了 4,对比一 ...
- 第十二节：pandas缺失数据处理
1.isnull():检查是否含有确实数据 2.fillna():填充缺失数据 3.dropna() :删除缺失值 4.replace():替换值
- C++数组查重
今天课上实验课,遇到一道题目,需要查找一个数组中出现次数最多的元素和次数,并且输出.第一次用struct模拟字典,十分麻烦而且复杂度是O(n*n).其实,运用转化的思想,可以先将其排序,然后再查找即可 ...
- PAT 1098. Insertion or Heap Sort
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...