小强的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 ...
随机推荐
- 全网代理公开ip爬取（隐藏元素混淆+端口加密）
简述 本次要爬取的网站是全网代理,貌似还是代理ip类网站中比较有名的几个之一,其官网地址: http://www.goubanjia.com/. 对于这个网站的爬取是属于比较悲剧的,因为很久之前就写好 ...
- 学习笔记：Zookeeper 应用案例(上下线动态感知)
1.Zookeeper 应用案例(上下线动态感知) 8.1 案例1--服务器上下线动态感知 8.1.1 需求描述 某分布式系统中,主节点可以有多台,可以动态上下线 任意一台客户端都能实时感知到主节点服 ...
- iOS 滚动视图的复用问题解决方案
LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题.它可以支持跨View层的复用,用易用方式来 ...
- Android在一个TextView里显示不同样式的字体
在同一个TextView里显示不同样式的字体 public void setSpan(Object what, int start, int end, int flags); 样式1:背景色.粗体.字 ...
- SQLite 数据类型(http://www.w3cschool.cc/sqlite/sqlite-data-types.html)
SQLite 数据类型 SQLite 数据类型是一个用来指定任何对象的数据类型的属性.SQLite 中的每一列,每个变量和表达式都有相关的数据类型. 您可以在创建表的同时使用这些数据类型.SQLite ...
- Android简易实战教程--第十八话《ListView显示，简单的适配器SimpleAdapter》
本篇介绍Listview的显示,对于listview有许多的适配器,如ArrayAdapter,BaseAdapter,SimpleAdapter等等.本篇先热身一下,介绍最简单的SimpleAdap ...
- iOS9中关于地址簿ABAddressBookXXX之类方法被废弃的解决
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在iOS9的SDK中我们会发现原来地址簿权限查询,获取以及创建 ...
- Github Pages 搭建HEXO主题个人博客
跌跌撞撞,总算是建立起来了.回首走过的这么多坑,也真的是蛮不容易的.那么就写点东西,记录我是怎么搭建的吧. 准备工作 安装Node.js: 用于生成静态页面,我们需要到官网上去下载即可.http:// ...
- ubuntu opengl 开发
开发环境: eclipse,需要安装C++开发插件,在自带的源中查找安装C++开发工具包即可 下载安装gl库: sudo apt-get install libgl1-mesa-dev 下载安装glu ...
- Objc生成搜索引擎查询字符串
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 拿baidu为例,百度的搜索url为: http://www. ...