小强的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 ...
随机推荐
- PHP 文件
PHP 文件处理 fopen() 函数用于在 PHP 中打开文件. 打开文件 fopen() 函数用于在 PHP 中打开文件. 此函数的第一个参数含有要打开的文件的名称,第二个参数规定了使用哪种模式来 ...
- Linux系统网络性能实例分析
由于TCP/IP是使用最普遍的Internet协议,下面只集中讨论TCP/IP 栈和以太网(Ethernet).术语 LinuxTCP/IP栈和 Linux网络栈可互换使用,因为 TCP/IP栈是 L ...
- ViewPager滑动后，可移动的Imageview会回到初始化的位置
知乎看到的原文http://www.zhihu.com/question/37398770?sort=created ViewPager滑动后,可移动的Imageview会回到初始化的位置? < ...
- NLP系列(1)_从破译外星人文字浅谈自然语言处理基础
作者:龙心尘 &&寒小阳 时间:2016年1月. 出处: http://blog.csdn.net/longxinchen_ml/article/details/50543337 ht ...
- 理解性能的奥秘——应用程序中慢，SSMS中快（6）——SQL Server如何编译动态SQL
本文属于<理解性能的奥秘--应用程序中慢,SSMS中快>系列 接上文:理解性能的奥秘--应用程序中慢,SSMS中快(5)--案例:如何应对参数嗅探 我们抛开参数嗅探的话题,回到了本系列的最 ...
- 亲密接触Redis-第二天（Redis Sentinel）
简介 经过上次轻松搭建了一个Redis的环境并用Java代码调通后,这次我们要来看看Redis的一些坑以及Redis2.8以后带来的一个新的特性即支持高可用特性功能的Sentinel(哨兵). Red ...
- ActiveMQ + NodeJS + Stomp 极简入门
前提 安装ActiveMQ和Nodejs 测试步骤 1.执行bin\win32\activemq.bat启动MQ服务 2. 打开http://localhost:8161/admin/topics.j ...
- android 网络获取json并且显示（2）
1.将要的取得的json数据格式如下: 我们封装之前的类用google提供的JSONArray和JSONObject类对json字符串进行解析. 对于姚明显示每一条数据,我们封装了一个类如下: pub ...
- Combiners和Partitioner编程
Combiners的作用: 每一个map可能会产生大量的输出,combiner的作用就是在map端对输出先做一次合并,以减少传输到reducer的数据量. combiner最基本是实现本地key的归并 ...
- Hadoop MapReduce工作原理
在学习Hadoop,慢慢的从使用到原理,逐层的深入吧 第一部分:MapReduce工作原理 MapReduce 角色 •Client :作业提交发起者. •JobTracker: 初始化作业,分配 ...