小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
来自:http://blog.csdn.net/dawanganban/article/details/17679069
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下HTML5的优势，我们开始制作一个漂亮的视频播放器吧
先别急，在开始制作之前先了解一下视频文件的基本知识。
一、视频的格式
目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：
;
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 ...
随机推荐
- JavaScript 流程语句知识脑图
- 线程停止与volatile
1.使用标志位停止线程 在Java中希望停止线程,可以使用设置标志位的方法,如下例所示: class SimpleTask implements Runnable{ private boolean s ...
- iOS控制反转(IoC)与依赖注入(DI)的实现
背景 最近接触了一段时间的SpringMVC,对其控制反转(IoC)和依赖注入(DI)印象深刻,此后便一直在思考如何使用OC语言较好的实现这两个功能.Java语言自带的注解特性为IoC和DI带来了极大 ...
- 【SSH系列】Hibernate映射 -- 一对一单向关联映射
映射原理 一对一关联映射:两个实体对象之间是一对一的关联映射,即一个对象只能与另外唯一的一个对象相对应.有两种策略可以实现一对一的关联映射: a.主键关联:即让两个对象具有相 ...
- Ubuntu安装telent服务器时出现:apt-get:Package has no installation
当我在终端敲下这条命令的时候,系统就提示telnetd:apt-get:Package has no installation sudo apt-get install xinetd telnetd ...
- JVM远程DEBUG（JPDA ）
原理 1. JPDA简介 JPDA(Java Platform Debugger Architecture)为Java平台上的调试器定义了一个标准的体系结构.该体系结构包括3个主要组成部分:JVM T ...
- 记住经典的斐波拉契递归和阶乘递归转换为while规律
记住经典的斐波拉契递归和阶乘递归转换为while规律.它为实现更复杂转换提供了启发性思路. # 斐波拉契--树形递归 def fab(n): if n<3: return n return fa ...
- Centos6.5 mysql安装
cenos中安装软件使用yum进行安装,小米加步枪不如ak47. 第1步.yum安装mysql yum -y install mysql-server 第2步.设置开机启动 chkconfig ...
- [error]configure: error: You need a C++ compiler for C++ support.
安装pcre包的时候提示缺少c++编译器 解决办法 使用yum安装 yum -y install gcc-c++ 本文出自 "orangleliu笔记本"博客,转载请务必保留此出处 ...
- Struts 2 标签库
<s:if>标签 拥有一个test属性,其表达式的值用来决定标签里内容是否显示 <s:if test="#request.username=='clf'"> ...