小强的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 ...
随机推荐
- 优先使用TimeUnit类中的sleep()
TimeUnit是什么? TimeUnit是java.util.concurrent包下面的一个类,TimeUnit提供了可读性更好的线程暂停操作,通常用来替换Thread.sleep(),在很长一段 ...
- Weblogic 12c 集群环境搭建
本文是在windows7操作系统下配置的,jdk版本1.7 ,weblogic版本12.1.3.0.0. 搭建集群前的规划 其中AdminServer是总控制端,server1.server2.ser ...
- SMON功能-SMON_SCN_TIME字典基表
SMON后台进程的作用还包括维护SMON_SCN_TIME基表. SMON_SCN_TIME基表用于记录过去时间段中SCN(system change number)与具体的时间戳(timestamp ...
- Android线性布局
线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...
- android Handler机制之ThreadLocal详解
概述 我们在谈Handler机制的时候,其实也就是谈Handler.Message.Looper.MessageQueue之间的关系,对于其工作原理我们不做详解(Handler机制详解). Messa ...
- MPAndroidChart——饼图
MPAndroidChart--饼图 MPAndroidChart是安卓下的一个开源图形库,很多效果,简单看几个效果图 Github地址:https://github.com/PhilJay/MPAn ...
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan ------------------ ...
- 什么时候App委托会收到App进程被结束的消息
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在Xcode建立的新项目后,在AppDelegate类会发 ...
- 15 Action View 以及监听 的使用
menu 代码 <menu xmlns:android="http://schemas.android.com/apk/res/android" > <!-- a ...
- Spark技术内幕: Task向Executor提交的源码解析
在上文<Spark技术内幕:Stage划分及提交源码分析>中,我们分析了Stage的生成和提交.但是Stage的提交,只是DAGScheduler完成了对DAG的划分,生成了一个计算拓扑, ...