小强的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 ...
随机推荐
- 2018 dnc 公司案例大全，迎接.NET Core开源新时代
2018 dnc 公司案例大全,迎接.NET Core开源新时代 dnc = .NET Core.dotnet Core dnc是微软新一代主力编程平台,开源.免费.跨平台.轻量级.高性能,支持L ...
- django之允许外部机器访问
开开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python3 manage.py runserver 0.0.0.0:9000 然后在settings里修改ALLOWED_ ...
- Python3 多线程
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...
- ScrollView嵌套ListView后，进入页面不从顶部开始显示的问题解决
ScrollView嵌套ListView后,进入页面不从顶部开始显示的问题解决 首先,正常情况下,如果在ScrollView里嵌套ListView后,会发现ListView只显示1条数据 那么,为了解 ...
- XListView下拉刷新和上拉加载更多详解
转载本专栏每一篇博客请注明转载出处地址,尊重原创.博客链接地址:小杨的博客 http://blog.csdn.net/qq_32059827/article/details/53167655 市面上有 ...
- 手把手教你做一个Shell命令窗口
这是一个类似于win下面的cmd打开后的窗口,可以跨平台使用,可以在win和linux下面同时使用,主要功能如下: 首先我们需要把这些功能的目录写出来,通过写一个死循环,让其每次回车之后都可以保持同样 ...
- springMVC源码分析--SimpleServletHandlerAdapter（二）
上一篇博客springMVC源码分析--HandlerAdapter(一)中我们主要介绍了一下HandlerAdapter接口相关的内容,实现类及其在DispatcherServlet中执行的顺序,接 ...
- PHP学习（3）—在HTML中嵌入PHP
我们以一个提交订单和显示订单信息的例子为学习PHP的开始.这个例子包含两个文件.一个提交订单的html文件:orderform.html,一个显示订单信息的php文件:processorder.php ...
- java.io.FileNotFoundException: ..\lib\commons-el.jar
安装openfire成功后,启动遇到java.io.FileNotFoundException: ..\lib\commons-el.jar错误,并不是缺少了jar包,只需以管理员身份运行即可解决.
- SQL Server 执行计划操作符详解（1）——断言(Assert)
前言: 很多很多地方对于语句的优化,一般比较靠谱的回复即使--把执行计划发出来看看.当然那些只看语句就说如何如何改代码,我一直都是拒绝的,因为这种算是纯蒙.根据本人经验,大量的性能问题单纯从语句来看很 ...