h5自定义播放器得实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--插入播放按钮得文字图标格式（具体使用方法可以百度http://fontawesome.dashgame.com/）-->
<link rel="stylesheet" href="../css/font-awesome.css">
<!--页面结构设置得样式-->
<style>
body {
padding: 0;
margin: 0;
font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
background-color: #F7F7F7;
}
a {
text-decoration: none;
}
.playerTitle{
width:100%;
margin: 0 auto;
line-height:100px;
font-size: 40px;
text-align: center;
}
.player{
width: 720px;
height: 360px;
margin: 0 auto;
background: url("../images/loading.gif") center no-repeat;
background-size: cover;
position: relative;
}
video{
height:100%;
margin: 0 auto;
display: none;
}
.controls {
width: 720px;
height: 40px;
position: absolute;
left: 0px;
bottom: -40px;
background-color: #000;
}
.controls > .switch{
width: 20px;
height: 20px;
display: block;
font-size: 20px;
color: #fff;
position: absolute;
left: 10px;
top: 10px;
}
.controls > .expand{
width: 20px;
height: 20px;
display: block;
font-size: 20px;
color: #fff;
position: absolute;
right: 10px;
top: 10px;
}
.controls > .progress{
width: 430px;
height: 10px;
position: absolute;
left:40px;
bottom:15px;
background-color: #555;
}
.controls > .progress > .bar{
width:100%;
height:100%;
border-radius: 3px;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 999;
}
.controls > .progress > .loaded{
width:60%;
height:100%;
background-color: #999;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.controls > .progress > .elapse{
width:0%;
height:100%;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
z-index: 3;
}
.controls > .time{
height: 20px;
position: absolute;
left:490px;
top: 10px;
color: #fff;
font-size: 14px;
}
</style>
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
<video src="../mp4/chrome.mp4"></video>
<div class="controls">
<!--javascript:; a链接点击不让跳转 fa 库名fa-play 文字名 文字库使用方法-->
<a href="javascript:;" class="switch fa fa-play"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<div class="progress">
<!--点击的透明层，效果是点击改变进度条和播放得当前时间-->
<div class="bar"></div>
<!--缓冲进度条（由于是本地视频加载比较快所以就没法感受到没写0.0）-->
<div class="loaded"></div>
<!--播放进度条-->
<div class="elapse"></div>
</div>
<div class="time">
<!--播放当前时间-->
<span class="currentTime">00:00:00</span>
\
<!--视频时间总长度-->
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
<!--基于jquery的文件引入-->
<script src="./jquery.min.js"></script>
<script>
/*通过jq来实现功能*/
$(function(){
/*1.获取播放器 对象的转换,把jquery转换为dom对象*/
var video=$("video")[0];
/*2.实现播放与暂停*/
$(".switch").click(function(){
/*实现播放与暂停的切换：如果是暂停>>播放 ，如果是播放 >> 暂停*/
if(video.paused){
video.play();
/*移除暂停样式，添加播放样式*/
}
else{
video.pause();
/*移除播放样式，添加暂停样式*/
}
/*设置标签的样式 fa-pause:暂停 fa-play：播放*/
$(this).toggleClass("fa-play fa-pause");
});
/*3.实现全屏操作*/
$(".expand").click(function(){
/*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
if(video.requestFullScreen){
video.requestFullScreen();
}
else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}
});
/*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
video.oncanplay=function(){
setTimeout(function(){
/*1.将视频文件设置为显示*/
video.style.display="block";
/*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
var total=video.duration; //01:01:40 00:00:36
/*3.计算时分少 60*60=3600
* 3700:3700/3600
* 3700:3700%3600 >> 100 /60*/
/*var hour=Math.floor(total/3600);
/!*补0操作*!/
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(total%3600/60);
minute=minute<10?"0"+minute:minute;
var second=Math.floor(total%60);
second=second<10?"0"+second:second;*/
var result=getResult(total)
/*4.将计算结果展示在指定的dom元素中*/
$(".totalTime").html(result);
},2000);
}
/*通过总时长计算出时分秒*/
function getResult(time){
var hour=Math.floor(time/3600);
/*补0操作*/
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(time%3600/60);
minute=minute<10?"0"+minute:minute;
var second=Math.floor(time%60);
second=second<10?"0"+second:second;
/*返回结果*/
return hour+":"+minute+":"+second;
}
/*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
* 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
video.ontimeupdate=function(){
/*1.获取当前的播放时间*/
var current=video.currentTime;
/*2.计算出时分秒*/
var result=getResult(current);
/*3.将结果展示在指定的dom元素中*/
$(".currentTime").html(result);
/*4.设置当前播放进度条样式 0.12>>0.12*100=12+%>12%*/
var percent=current/video.duration*100+"%";
$(".elapse").css("width",percent);
}
/*6.实现视频的跳播*/
$(".bar").click(function(e){
/*1.获取当前鼠标相对于父元素的left值--偏移值*/
var offset= e.offsetX;
/*2.计算偏移值相对总父元素总宽度的比例*/
var percent=offset/$(this).width();
/*3.计算这个位置对应的视频进度值*/
var current=percent*video.duration;
/*4.设置当前视频的currentTime*/
video.currentTime=current;
});
/*7.播放完毕之后，重置播放器的状态*/
video.onended=function(){
// 当前播放时间清零
video.currentTime=0;
// 播放按钮的事件由暂停替换位播放
$(".switch").removeClass("fa-pause").addClass("fa-play");
}
});
</script>
</body>
</html>
h5自定义播放器得实现原理的更多相关文章
- 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 基于 AVPlayer 自定义播放器
如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- 视频播放—— H5同层播放器接入规范
H5同层播放器接入规范 x5-video-player-type 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器 x5-video-playe ...
- 用H5和js写一个移动端自定义播放器
前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
- H5音乐播放器源码地址
源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA 安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...
- H5音乐播放器源码共享
由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w H5源码!暂时只支持手机适配,电脑端 ...
- H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...
随机推荐
- CH6B12 最优高铁环
6B12 最优高铁环 0x6B「图论」练习 背景 幻影国建成了当今世界上最先进的高铁,该国高铁分为以下几类: S---高速光子动力列车---时速1000km/h G---高速动车---时速500km/ ...
- ACM学习历程—FZU2191完美的数字(数学)
Description Bob是个很喜欢数字的孩子,现在他正在研究一个与数字相关的题目,我们知道一个数字的完美度是 把这个数字分解成三个整数相乘A*A*B(0<A<=B)的方法数,例如数字 ...
- bzoj 2733 永无乡 线段树
题目: 支持两种操作: 合并两点所在的联通块 查询某点所在联通块内权值第k小. 题解 平衡树启发式合并随便搞一搞就好了. 我写了一个线段树合并 #include <cstdio> #inc ...
- 白话算法(6) 散列表(Hash Table) 从理论到实用（下）
[澈丹,我想要个钻戒.][小北,等等吧,等我再修行两年,你把我烧了,舍利子比钻戒值钱.] ——自扯自蛋 无论开发一个程序还是谈一场恋爱,都差不多要经历这么4个阶段: 1)从零开始.没有束缚的轻松感.似 ...
- 闪回之 回收站、Flashback Drop （table、index、trigger等）
一: Flashback Drop 操作流程 模式一:drop table 后未新建同名表 SQL> create table flashdrop as select * from user_o ...
- category extension
1 category 分类,只能添加方法,添加的方法成为原来类的一部分,达到扩展类的目的,可以被子类继承 主要给没有源代码的类 添加方法,团队合作项目互不影响,不该动原有类的基础上添加方法 self ...
- 批量创建10个系统帐号tianda01-tianda10并设置密码
#.添加用户 useradd tianda01 #.非交互式给密码 echo "pass"|passwd --stdin tianda #.- 加0思路 ()..} () #随机密 ...
- 关于 sklearn.decomposition.KernelPCA的简单介绍
from sklearn import decomposition import numpy as np A1_mean = [1, 1] A1_cov = [[2, .99], [1, 1]] A1 ...
- C++之string类
1.String对象的初始化 string s1; 默认构造函数,s1为空串 string s4(n, 'c'); 将s4初始化为字符c的n个副本 string s ...
- Centos6.8下yum安装python2.7
下载 ius-release.rpm包 wget https://centos6.iuscommunity.org/ius-release.rpm 安装ius-release.rpm包 rpm -Uv ...