07-HTML5举例:简单的视频播放器

我们采用 Bootstrap 网站的图标字体,作为播放器的按钮图标。

index.html的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 引入字体图标的文件-->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
} /* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
border-radius: 20px; } .palyer video{
height:100%;
display: block;
margin:0 auto;
/*display: none;*/
} /* 控制条*/ .controls{
width: 700px;
height:40px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
bottom:10px;
left:10px;
border-radius: 10px;
}
/*开关*/
.switch{
position: absolute;
width: 20px;
height: 20px;
left:10px;
top:10px; text-align: center;
line-height: 20px;
color:yellow; }
/*进度条*/
.progress{
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left:40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
/* 当前进度*/
.curr-progress{
width: 50%;
height: 10px;
background-color: #fff;
}
/* 时间模块*/
.time{
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
color:#fff;
position: absolute;
left:510px;
top:10px;
font-size:12px; }
/*全屏*/
.extend{
position: absolute;
width: 20px;
height: 20px; right:20px;
top:10px; text-align: center;
line-height: 20px;
color:yellow;
} </style>
</head>
<body>
<!-- 多媒体-->
<figure>
<!-- 多媒体标题-->
<figcaption>视频案例</figcaption>
<div class="palyer">
<video src="video/fun.mp4"></video>
<!-- 控制条-->
<div class="controls">
<!-- 播放暂停-->
<a href="#" class="switch icon-play"></a>
<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>
<!-- 全屏-->
<a href="#" class="extend icon-resize-full"></a>
</div> </div>
</figure> <script>
// 思路:
/*
* 1、点击按钮 实现播放暂停并且切换图标
* 2、算出视频的总时显示出出来
* 3、当视频播放的时候,进度条同步,当前时间同步
* 4、点击实现全屏
*/ // 获取需要的标签
var video=document.querySelector('video');
// 播放按钮
var playBtn=document.querySelector('.switch');
// 当前进度条
var currProgress=document.querySelector('.curr-progress');
// 当前时间
var currTime=document.querySelector('.curr-time');
// 总时间
var totalTime=document.querySelector('.total-time');
// 全屏
var extend=document.querySelector('.extend'); var tTime=0; // 1、点击按钮 实现播放暂停并且切换图标 playBtn.onclick=function(){
// 如果视频播放 就暂停,如果暂停 就播放
if(video.paused){
// 播放
video.play();
//切换图标
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
// 暂停
video.pause();
// 切换图标
this.classList.remove('icon-pause');
this.classList.add('icon-play');}
} // 2、算出视频的总时显示出出来
// 当时加载完成后的事件,视频能播放的时候
video.oncanplay=function(){
// 获取视频总时长
tTime=video.duration;
console.log(tTime); // 将总秒数 转换成 时分秒的格式:00:00:00
// 小时
var h=Math.floor(tTime/3600);
// 分钟
var m=Math.floor(tTime%3600/60);
// 秒
var s=Math.floor(tTime%60); // console.log(h);
// console.log(m);
// console.log(s); // 把数据格式转成 00:00:00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s; console.log(h);
console.log(m);
console.log(s);
// 显示出来
totalTime.innerHTML=h+":"+m+":"+s;
}
// * 3、当视频播放的时候,进度条同步,当前时间同步
// 当时当前时间更新的时候触发
video.ontimeupdate=function(){
// 获取视频当前播放的时间
// console.log(video.currentTime);
// 当前播放时间
var cTime=video.currentTime;
// 把格式转成00:00:00 var h=Math.floor(cTime/3600);
// 分钟
var m=Math.floor(cTime%3600/60);
// 秒
var s=Math.floor(cTime%60); // 把数据格式转成 00:00:00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s; // 显示出当前时间
currTime.innerHTML=h+":"+m+":"+s; // 改变进度条的宽度: 当前时间/总时间
var value=cTime/tTime; currProgress.style.width=value*100+"%"; } // 全屏
extend.onclick=function(){
// 全屏的h5代码
video.webkitRequestFullScreen();
} </script>
</body>
</html>

html 07-HTML5举例:简单的视频播放器的更多相关文章

  1. webdriver高级应用- 测试HTML5语言实现的视频播放器

    能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...

  2. HTML5视频(自定义视频播放器源码)

    video对象 兼容情况: safari浏览器不支持webm格式 Chrome浏览器支持webm格式 ie8以及以下不支持video标签 , ie9支持video标签 ,但是支持mp4格式的 Fire ...

  3. HTML5 自制本地网页视频播放器

    HTML5初试:本地视频用网页打开啦半个广告都可以没有,看来暴风什么的快要淘汰了. 视频格式还是有要求的,看来要备一个转码器. 格式 IE Firefox Opera Chrome Safari Og ...

  4. 用Qt实现简单的视频播放器

    ui 在.pro文件中添加 QT +=phonon 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> ...

  5. 第二十四篇-用VideoView制作一个简单的视频播放器

    使用VideoView播放视频,视频路径有三种: 1. SD卡中 2. Android的资源文件中 3. 网络视频 第一种,SD卡中的方法. 路径写绝对路径,如果不能播放,可以赋予读取权限. 效果图: ...

  6. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  7. 【转】100行代码实现最简单的基于FFMPEG+SDL的视频播放器

    FFMPEG工程浩大,可以参考的书籍又不是很多,因此很多刚学习FFMPEG的人常常感觉到无从下手.我刚接触FFMPEG的时候也感觉不知从何学起. 因此我把自己做项目过程中实现的一个非常简单的视频播放器 ...

  8. pyglet -- 视频播放器 (简单实现,效果不是太好,切换资源会卡死)(三)

    实现一个简单的视频播放器,效果不是很好.这里不多说,直接贴代码了. #-*- coding:gbk -*- import pyglet import os from pyglet.gl import ...

  9. 100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)【转】

    转自:http://blog.csdn.net/leixiaohua1020/article/details/8652605 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] ...

随机推荐

  1. 应聘阿里,字节跳动,美团必须掌握的Spring IOC与工厂模式

    Spring IOC与工厂模式 PS:本文内容较为硬核,需要对java的面向对象.反射.类加载器.泛型.properties.XML等基础知识有较深理解. (一)简单介绍 在讲Spring IOC之前 ...

  2. Guitar Pro使用技巧之乐段回放练习

    Guitar Pro中的"回放"功能是我们在吉他练习中非常常用的一项功能.我们在吉他练习中碰到某一乐段比较练习比较困难时,我们就可以用鼠标在Guitar Pro上选中该乐段,然后进 ...

  3. Word 2013中如何直接调用MathType

    相信有很多用户已经发现在使用Word 2013编辑文档时MathType无法直接调用,但是点击文档中的公式时能够跳出MathType公式编辑窗口,那么这是怎么回事呢?其实,这一问题也不是没有办法解决的 ...

  4. 怎么用MindManager制作议论文思维导图

    大家都写过作文吧,做小学到高考到大学,这是谁也摆脱不了的,但是大家写作文会提前把自己的思路整理出来吗?让自己行文更为顺畅,作文更为流利吗?特别是关于议论文,一直是高考写作的一个重点篇目,写好议论文,就 ...

  5. guitar pro系列教程(二十六):Guitar Pro教程之虚拟吉他功能讲解

    上一章节我们讲述了Guitar Pro的组织小节的相关功能,那么本章节我们还是采用图文结合的方式为大家讲解关于guitar pro中一些虚拟的吉他功能一 一做出讲解,感兴趣的朋友可以一起进来学习了解哦 ...

  6. mysql三种删除方式

    一般来说mysql有三种删除数据方式: 1. delete(常用) 2. truncate(慎用) 3. drop 以上三种方式都可以删除数据,但是使用场景是不同的. 从执行速度来说: drop &g ...

  7. 基于Python+requests搭建的自动化框架-实现流程化的接口串联

    框架产生目的:公司走的是敏捷开发模式,编写这种框架是为了能够满足当前这种发展模式,用于前后端联调之前(后端开发完接口,前端还没有将业务处理完毕的时候)以及日后回归阶段,方便为自己腾出学(mo)习(yu ...

  8. Codeforces Round #677 (Div. 3)

    F. Zero Remainder Sum || dp #include <cstdio> #include <algorithm> #include <cstring& ...

  9. bulk_create 批量插入数据

    def booklist(request): # 动态插入100条数据 for i in range(100): models.Book2.objects.create(name='第%s本书'%i) ...

  10. IdentityServer4系列 | 简化模式

    一.前言 从上一篇关于资源密码凭证模式中,通过使用client_id和client_secret以及用户名密码通过应用Client(客户端)直接获取,从而请求获取受保护的资源,但是这种方式存在clie ...