小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

玉溪牌小香烟 2024-08-26 21:26:23 原文

来自:http://blog.csdn.net/dawanganban/article/details/17679069

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下HTML5的优势，我们开始制作一个漂亮的视频播放器吧先别急，在开始制作之前先了解一下视频文件的基本知识。

一、视频的格式

目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：

;

left:0;

width:100%;

padding:10px;

color:#ccc;

font-size:20px;

font-weight:bold;

box-sizing: border-box;

-ms-box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

background: #1F1F1F; /* fallback */

background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

}

/*** VIDEO CONTROLS CSS ***/

/* control holder */

.control{

background:#333;

color:#ccc;

position:absolute;

bottom:0;

left:0;

width:100%;

z-index:5;

display:none;

}

/* control top part */

.topControl{

height:11px;

border-bottom:1px solid #404040;

padding:1px 5px;

background:#1F1F1F; /* fallback */

background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

}

/* control bottom part */

.btmControl{

clear:both;

background: #1F1F1F; /* fallback */

background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);

}

.control div.btn {

float:left;

width:34px;

height:30px;

padding:0 5px;

border-right:1px solid #404040;

cursor:pointer;

}

.control div.text{

font-size:12px;

font-weight:bold;

line-height:30px;

text-align:center;

font-family:verdana;

width:20px;

border:none;

color:#777;

}

.control div.btnPlay{

background:url(control.png) no-repeat 0 0;

border-left:1px solid #404040;

}

.control div.paused{

background:url(control.png) no-repeat 0 -30px;

}

.control div.btnStop{

background:url(control.png) no-repeat 0 -60px;

}

.control div.spdText{

border:none;

font-size:14px;

line-height:30px;

font-style:italic;

}

.control div.selected{

font-size:15px;

color:#ccc;

}

.control div.sound{

background:url(control.png) no-repeat -88px -30px;

border:none;

float:right;

}

.control div.sound2{

background:url(control.png) no-repeat -88px -60px !important;

}

.control div.muted{

background:url(control.png) no-repeat -88px 0 !important;

}

.control div.btnFS{

background:url(control.png) no-repeat -44px 0;

float:right;

}

.control div.btnLight{

background:url(control.png) no-repeat -44px -60px;

border-left:1px solid #404040;

float:right;

}

.control div.lighton{

background:url(control.png) no-repeat -44px -30px !important;

}

/* PROGRESS BAR CSS */

/* Progress bar */

.progress {

width:85%;

height:10px;

position:relative;

float:left;

cursor:pointer;

background: #444; /* fallback */

background:-moz-linear-gradient(top,#666,#333);

background:-webkit-linear-gradient(top,#666,#333);

background:-o-linear-gradient(top,#666,#333);

box-shadow:0 2px 3px #333 inset;

-moz-box-shadow:0 2px 3px #333 inset;

-webkit-box-shadow:0 2px 3px #333 inset;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.progress span {

height:100%;

position:absolute;

top:0;

left:0;

display:block;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.timeBar{

z-index:10;

width:0;

background: #3FB7FC; /* fallback */

background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);

background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);

background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);

box-shadow:0 0 1px #fff;

-moz-box-shadow:0 0 1px #fff;

-webkit-box-shadow:0 0 1px #fff;

}

.bufferBar{

z-index:5;

width:0;

background: #777;

background:-moz-linear-gradient(top,#999,#666);

background:-webkit-linear-gradient(top,#999,#666);

background:-o-linear-gradient(top,#999,#666);

box-shadow:2px 0 5px #333;

-moz-box-shadow:2px 0 5px #333;

-webkit-box-shadow:2px 0 5px #333;

}

/* time and duration */

.time{

width:15%;

float:right;

text-align:center;

font-size:11px;

line-height:12px;

}

/* VOLUME BAR CSS */

/* volume bar */

.volume{

position:relative;

cursor:pointer;

width:70px;

height:10px;

float:right;

margin-top:10px;

margin-right:10px;

}

.volumeBar{

display:block;

height:100%;

position:absolute;

top:0;

left:0;

background-color:#eee;

z-index:10;

}

/* OTHERS CSS */

/* video screen cover */

.loading, #init{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:url(loading.gif) no-repeat 50% 50%;

z-index:2;

display:none;

}

#init{

background:url(bigplay.png) no-repeat 50% 50% !important;

cursor:pointer;

}

video.js

$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':-45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
$('.caption').animate({'top':-45},300);
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':0}, 500);
$('.caption').stop().animate({'top':0}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':-45}, 500);
$('.caption').stop().animate({'top':-45}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else {
$('.btnPlay').removeClass('paused');
video[0].pause();
}
};
//speed text clicked
$('.btnx1').on('click', function() { fastfowrd(this, 1); });
$('.btnx3').on('click', function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$('.btnStop').on('click', function() {
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//light bulb button clicked
$('.btnLight').click(function() {
$(this).toggleClass('lighton');
//if lightoff, create an overlay
if(!$(this).hasClass('lighton')) {
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('.videoContainer').css({
'z-index':1000
});
}
//if lighton, remove overlay
else {
$('.overlay').remove();
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
}
else{
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});

运行效果：

源代码下载地址：http://download.csdn.net/detail/lxq_xsyu/6787775

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器的更多相关文章

小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机
Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现的 ...
小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.net.cn/ 一.新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立 ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

随机推荐

linux下的静态库与动态库详解
静态库先说说我们为什么需要库? 当有些代码我们大量会在程序中使用比如(scanf,printf等)这些函数我们需要在程序中频繁使用,于是我们就把这些代码编译为库文件,在需要使用时我们直接链接即可. ...
Redis和nosql简介,api调用；Redis数据功能（String类型的数据处理）；List数据结构（及Java调用处理）；Hash数据结构；Set数据结构功能；sortedSet（有序集合）数
1.Redis和nosql简介,api调用 14.1/ nosql介绍 NoSQL:一类新出现的数据库(not only sql),它的特点: 1. 不支持SQL语法 2. 存储结构跟传统关系型数 ...
env-cmd 从文件读取配置变量
npm install --registry=https://registry.npm.taobao.org -D env-cmd So.. 这样你在npm run build的时候会发现输出文件里面 ...
RunLoop总结：RunLoop的应用场景（五）
今天要介绍的RunLoop应用场景感觉很酷炫,我们可能不常用到,但是对于做Crash 收集的 SDK可能会用得比较频繁吧.相比关于RunLoop 可以让应用起死回生,大家都听说过,可是怎么实现呢?今天 ...
【伯乐在线】这些 Git 技能够你用一年了
原文出处: Pyper 欢迎分享原创到伯乐头条用git有一年了,下面是我这一年来的git使用总结,覆盖了日常使用中绝大多数的场景.嗯,至少是够用一年了,整理出来分享给大家,不明白的地方可以回复交 ...
Programming In Scala笔记-第四章、类和对象
类似于Java,Scala中也有类和对象的概念. 一.类.属性和方法 1.类类是对一类事物的抽象,当一个类被定义后,就可以以该定义为模板,定义该类的一系列对象.比如说有以下一个模板人类: 有姓名: ...
Dynamics CRM 通过PowerShell启用AllowDeclarativeWorkflows即自定义XAML WorkFlows
CRM的工作流即workflow,不了解的人乍听之下以为是审批流,其实不是的,CRM本身是不带审批功能的,要实现审批必须要第三方的工作流引擎的配合,当然你也可以自己开发. 工作流刚开始出现的时候只有异 ...
早期Swift中Cocos2D初始化代码的重构
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在早期的Swift中在子类里只能调用超类的design ...
TraceView性能分析工具介绍
一.TraceView简介 TraceView是AndroidSDK里面自带的工具,用于对Android的应用程序以及Framework层的代码进行性能分析. TraceView是图形化的工具,最终它 ...
【Unity Shaders】法线纹理（Normal Mapping）的实现细节
写在前面写这篇的目的是为了总结我长期以来的混乱.虽然题目是"法线纹理的实现细节",但其实我想讲的是如何在shader中编程正确使用法线进行光照计算.这里面最让人头大的就是各种矩阵 ...

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器的更多相关文章

随机推荐

热门专题