HTML5 播放器

之前一个前端群里大牛做了一个自适应的HMLT5播放器

最近根据其思路做了一个相对单一移动端的demo，demo用的图片和歌曲json的数据设计都是群里大牛做的，在这谢谢~；

同时借鉴的几篇文章：

慕课网： http://www.imooc.com/view/299 （这个我也没看完....）

leinov : http://www.cnblogs.com/leinov/p/3896772.html （完整的音频的解释demo）

陈在真：http://blog.sina.com.cn/s/blog_74d6cedd0102vkbr.html （也是这篇文章让我在这次demo 里没有做音量控制和这个音量渐进、减退，因为感觉没多大用....尤其是在手机端都有这个音控的按键前提下....）

上图：

HTML5 播放器

上代码：

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5 播放器</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="description" content="">

    <meta name="apple-touch-fullscreen" content="yes" />

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

    <meta content="no" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

<style>

    *{margin:0;padding:0;}

    li{ list-style: none;}

    a{ text-decoration: none;}

    html,body{width:100%; height:100%; font-family: 'microsoft yahei', Arial, Helvetica, sans-serif;}

    body{-webkit-tap-highlight-color: rgba(0,0,0,0); }

    .tac{ text-align:center;}

    .fl{ float:left;}

    .fr{ float:right;}



    .body_bg{transition:opacity 0.5s ease-in; position:absolute;left:0;top:0; width:100%; height:100%; background-image:url(bg.jpg) 0 0 no-repeat;   background-size: cover; opacity: 0;}

    .body_bg.cur{opacity:1;}

    .list_main{overflow-y: auto;}

    .list_ul{ width:100%;}

    .list_ul li{ position:relative; min-height: 55px; font-size: 14px; padding:0 20px; color:#fff; line-height: 20px;}

    .list_ul li.cur{ color:#f48e4a;}

    .list_line{ position:absolute;left:0;bottom:0; width:100%; height:1px; background: rgba(0,0,0,.3);}

    .list_ul .music_mian{ position:absolute;top:50%;transform: translateY(-50%);}

    .list_ul p{ font-size: 14px;}

    .audio_main{ position:fixed; bottom:0;left:0; width:100%; height:100px;background:rgba(0,0,0,.3); }

    .process_line{ position:relative; width:100%; height:3px; background-color: #fff; }

    .progress_after{ position:absolute;left:0;top:0; width:0px; height:3px; background-color: #f48e4a;}

    .process_main{  }

    .music_time{ color:#fff; font-size: 12px;margin:5px;}

    .music_btn{ position:absolute;bottom:0;left:50%; width:238px;  transform: translateX(-50%);}

    .music_btn a{ display:inline-block; width:60px; height:46px; background:url(player.png) no-repeat 0 0; font-size: 0;}

    .music_btn .music_before{background-position:-143px 0; }

    .music_btn .music_switch{ background-position:-68px 0;margin-right:20px;}

    .music_btn .cur{ background-position:-68px -140px;}

    .music_btn .music_after{background-position:0px 0;margin-right:20px;}

    

    .name_singer{ color:#fff; margin:5px; font-size:12px;}

    .audio_dot{ position:absolute;left:0;top:-6px; width:14px; height:14px;border-radius: 50%; background:#fff;}

     .audio_Bgdot{ position:absolute;left:-15px;top:-15px; width:44px; height:44px;background:rgba(0,0,0,0);}

    .turn{ position:absolute;left: -36px;bottom: 12px; width:30px;height:30px; text-align:center;line-height: 30px; font-size: 14px; color:#fff;}

</style>

<script type="text/javascript" src="zepto.js"></script>

<script type="text/javascript" src="music.js"></script>



<script type="text/javascript">

$(function(){



    var audios = [

            {

                name:'知己',

                singer:'未知',

                src:'02.mp3',

                cover:''

            },

            {

                name:'暗号',

                singer:'周杰伦',

                src:'01.mp3',

                cover:'cover.jpg'

            },

            {

                name:'One Day.mp3',

                singer:'Kodaline',

                src:'03.mp3',

                cover:''

            },

            {

                name:'KOK',

                singer:'未知',

                src:'KOK.mp3',

                cover:''

            },

            {

                name:'一块红布',

                singer:'',

                src:'04.mp3',

                cover:''

            },

            {

                name:'Hall Of Fame ',

                singer:'The Script Feat Will.I.Am',

                src:'05.mp3',

                cover:''

            },

            {

                name:'Rumour Has It',

                singer:'未知',

                src:'06.mp3',

                cover:''

            },

            {

                name:'寻找',

                singer:'李志',

                src:'08.mp3',

                cover:''

            },

            {

                name:'Rooftops',

                singer:'Kris Allen',

                src:'07.mp3',

                cover:''

            }

    ];









    Music.init(audios);





});







</script>

</head>

    

<body style="background-image:url(bg.jpg); opacity:1; ">

    <div class="body_bg" style="background-image:url(bg.jpg); opacity:1; "></div>

    <div class="list_main" id="list_main">

        <ul class="list_ul" id="list_ul">

            

        </ul>

    </div>

    <div class="audio_main" id="audio_main">

            <div class="process_main">

                <div class="process_line" id="process_line">

                    <div class="progress_after" id="line_after"></div>

                    <div class="audio_dot" id="dot">

                        <div  class="audio_Bgdot"></div>

                    </div>

                </div>

            </div>

            <div class="fl music_time" id="time_start">00:00</div>

            <div class="fr music_time" id="time_end">00:00</div>

            <div class="tac name_singer" id="name_txt"></div>

            <div class="tac name_singer" id="singer_txt"></div>

            <div class="music_btn">

                <a href="javascript:;" class="music_after" id="music_after"></a>

                <a href="javascript:;" class="music_switch" id="music_switch"></a>

                <a href="javascript:;" class="music_before" id="music_before"></a>

                <div class="turn" id="turn">顺</div>

            </div> 

    </div>

</body>

</html>

js:

var Music = {

    init            : function( data ){

        this.data = [];//存储数据;

        this.randomArr = [];

        for( var i=0,len=data.length;i<len;i++ ) {

            if( data[i].src ){

                this.data.push( data[i] ); 

                this.randomArr.push(i);

            }

        }

        

        this._getElement(); //获取dom;

        this.createAudio()//创建音频;

        this.createMusicList(); //创建歌单;



    },

    _getElement    : function(){

        this.list_ul = $('#list_ul');

        this.music_switch = $('#music_switch');

        this.music_before = $('#music_before');

        this.music_after = $('#music_after');

        this.time_start = $('#time_start');

        this.time_end = $('#time_end');

        this.process_line = $('#process_line');

        this.line_after = $('#line_after');

        this.window = $(window);

        this.bodybg = $('.body_bg');

        this.dot = $('#dot');

        this.turn = $('#turn');

        this.trunNum = 0;

        this._dot = document.getElementById('dot');

        this._process_line = document.getElementById('process_line');

        this.Time = null;

        this.startPic = this.bodybg.css('backgroundImage');

        this.dragBtn = false;

        this.playing = false;

    },

    _bindElement   : function(){

        var that = this;

        var that = this;



        this.turn.click(function(){ 

            that.trunNum++;

            

            var status = that.trunNum % 3;

            switch(status){

                case 0: 

                    that.turn.html('顺');

                break;

                case 1:

                    that.randomArr.sort(function(){

                        return Math.random()>0.5?-1:1;

                    });

                    that.turn.html('随');

                break;

                case 2: 

                    that.turn.html('单');

                break;

            }

        });



        

        //下一首歌

        this.music_before.click(function(){

            that._beforeMusic();

        });

        

        //上一首歌

        this.music_after.click(function(){

            that._afterMusic()

        });



        this.music_switch.on('click',function(){

            that._fnPlay();

        });



        

        this.lineW = this.process_line.width() - this.dot.width();

        function _touchstart( event ){ 

            

            that.dragBtn = true;



            that.maxX = that.process_line.width() - that.dot.width();

            

            event.stopPropagation();  

        }



        function _touchmove( event ){

            var touch = event.targetTouches[0];

            var moverX = touch.pageX; 

            that.dragBtn = true;

            moverX = moverX < 0 ? 0 : moverX;

            moverX = moverX > that.maxX  ? that.maxX : moverX;

            

            that.dot.css('left',moverX);

            that.line_after.css('width',moverX);

            that.dragX = touch.pageX;

            event.stopPropagation();

        }



        function _touchend( event ){

            var touch = event.targetTouches[0];

            event.stopPropagation();

            _tapLine();

        }

        this.process_line.click(function(event){

            var eX = event.clientX > that.lineW ? that.lineW : event.clientX;



            that.dot.css('left',eX);

            that.line_after.css('width',eX);

            _tapLine();

        });

        function _tapLine(){

            var l = parseFloat(that.dot.css('left'));

            var maxL = parseFloat(that.lineW);

            that._audio.currentTime = that._percentage( l,maxL,that._audio.duration);

            clearInterval(that.Time);

            that._musicTimer();            

            that.dragBtn = false; 

        }



        this._dot.addEventListener('touchstart',_touchstart,false);

        this._dot.addEventListener('touchmove',_touchmove,false);

        this._dot.addEventListener('touchend',_touchend,false);

    },

    createAudio   : function(){

        var html = '<audio id="audio" >您的浏览器不支持音频元素。</audio>';

        $('body').append(html);

        this._audio = document.getElementById('audio');

    },

    createMusicList  : function(){

        var that = this;

        var html = '';

        var data = this.data;

        this._getHeight();

        for( var i=0,len=data.length;i<len;i++ ){

            var name,singer,src,pic;

            

            if( toStrings(data[i].name).length > 0){

                name = toStrings(data[i].name);

            }else{

                name = '未知';

            }

            if( toStrings(data[i].singer).length > 0){

                singer = toStrings(data[i].singer);

            }else{

                singer = '未知';

            }



            /*

            if( data[i].cover ){

                pic = data[i].cover;

            }else{

                pic = this.startPic;

            }

            */

            pic = data[i].cover;

            src = data[i].src;



            html += '<li music_index='+i+' music_name='+ name +'  music_singer='+ singer +'  music_src='+src+' music_pic='+ pic +'>'  

                     +'<div class="music_mian">'

                     +    '<p class="music_name">'+name+'</p>'

                     +    '<p class="music_singer">'+singer+'</p>'

                     +  '</div>'

                     + '<div class="list_line"></div>'

                     +'</li>';

                     

        }

        this.list_ul.html(html);



        //列表绑定事件；

        this.list_ul.on('click','li',function(){

            

            that._bindElement();//创建事件;

            that._cutSongs(this);



        });

        

        //转换字符去掉空格；

        function toStrings( txt ){

            return txt.split(' ').join('&nbsp;').toString();

        }

    },

    _afterMusic : function(){

        var status = this.trunNum % 3;

        var current = this.list_ul.find('.cur');

        var index = current.index();

        var maxLen = this.data.length-1;

        var obj;

            



            if( status == 0 || status == 2 ){

                if( index == 0 ){



                  obj = this.list_ul.find('li').last();



                }else if( index > 0 ){



                  obj = current.prev();



                }

            }else if( status == 1 ){

                for(var i=0;i<maxLen;i++){

                    if( this.randomArr[i] == index ){

                        var num = i;

                        num--;

                        if( num <= 0 ){

                            num = maxLen;

                        }

                        obj = this.list_ul.find('li').eq(this.randomArr[num]);

                    }

                }

            }

            this._cutSongs(obj);

    },

    _beforeMusic : function(){

        var status = this.trunNum % 3;

        var current = this.list_ul.find('.cur');

        var index = current.index();

        var maxLen = this.data.length-1;

        var obj;

        

        if( status == 0 || status == 2 ){

            if( index == maxLen ){



              obj = this.list_ul.find('li').first();



            }else if( index < maxLen ){



              obj = current.next();



            }

        }else if( status == 1 ){

            for(var i=0;i<maxLen;i++){

                if( this.randomArr[i] == index ){

                    var num = i;

                    num++;

                    if( num >= maxLen ){

                        num = 0

                    }

                    obj = this.list_ul.find('li').eq(this.randomArr[num]);

                }

            }

        }

        this._cutSongs(obj);

    },

    _cutSongs : function( obj ){

         this.playing = true;

        $(obj).addClass('cur').siblings('li').removeClass('cur');

        var music_src = $(obj).attr('music_src');

        var music_pic = $(obj).attr('music_pic');

        var music_name = $(obj).attr('music_name');

        var music_singer = $(obj).attr('music_singer');



        $('#name_txt').html(music_name);

        $('#singer_txt').html(music_singer);

        

        if( music_pic ){

            this.bodybg.attr('style','background-image:url('+music_pic+');' );

        }else{

            this.bodybg.css('backgroundImage',this.startPic+';');

        }

        this.bodybg.addClass('cur');

        

        this._audio.src = music_src;

        

        this._fnPlay();

    },

    _getHeight :function(){

        var wH = $(window).height();

        var mH = $('#audio_main').height();

        var $musicMain = $('#list_main');

        var h = wH - mH;

        $musicMain.height(h);

        

    },

    _fnPlay  : function(){

        var that = this;

        

            if( this._audio.paused ){



                //判断是否重新加载歌曲    

                if(this.playing){

                    this._audio.load();



                    this.playing = false;

                }

                

                this._audio.play();

                this.music_switch.addClass('cur');

                this._audio.addEventListener('loadeddata',function(){

                    var timerMain = that._toTime(that._audio.duration);

                    var len = timerMain.split(':').length;

                    

                    switch(len){

                        case 1: 

                            that.time_start.html('00');

                        break;

                        case 2: 

                            that.time_start.html('00:00');

                        break;

                    }

                    

                    that.time_end.html(timerMain);

                    that._musicTimer();

                    

                 },false);

                

            }else{

                this._audio.pause();

                this.music_switch.removeClass('cur');

                clearInterval(that.Time);

            }

        

        

    },

    _percentage:function( a,b,c ){

        return    a/b*c;

    },

    _musicTimer : function(){

        var that = this;

        this.Time = setInterval(_snowTime,1000);

        var timerMain = that._toTime(that._audio.duration);

        var len = timerMain.split(':').length;

        function _snowTime(){

            

            if( that._audio.currentTime == that._audio.duration ){

                clearInterval(that.Time);

                var status = that.trunNum % 3;

                switch(status){

                    case 0: 

                        that._beforeMusic();

                    break;

                    case 1:

                        that._beforeMusic();

                    break;

                    case 2: 

                        var current = that.list_ul.find('.cur');

                        that._cutSongs(current);

                    break;

                }



            }



            if(!that.dragBtn){

                var timerMain = that._toTime(that._audio.currentTime);

                var l = that._percentage( that._audio.currentTime,that._audio.duration,parseFloat(that.lineW) );

                that.dot.css('left',l);

                that.line_after.css('width',l);

            }

            

            switch( len ){

                case 1: 

                    that.time_start.html(timerMain);

                break;

                case 2: 

                    var timer = timerMain.indexOf(':')>0?timerMain:'00:'+timerMain;

                    that.time_start.html(timer);

                break;

                

            }

            

        } 

    },

    _toTime : function( time ){

        var hour  = Math.floor(time/3600);

        var min   = Math.floor(time%3600/60);

        var sec   = Math.floor(time%60);

        

        var ih = hour <= 9 ? '0'+hour : hour;

        var im = min <= 9 ? '0'+min :min; 

        var is = sec <= 9 ? '0'+sec :sec;

        return ( ih > 0 ? ih+':' : '') + (im >0 ? im+':' :'') +is;

    }

}

总结：

最开始想用面向对象的方式写，但是后来还是觉得json单体的写法更实用

个人简单粗暴的判断方法是：

页面单一功能的应用就用 json单体；

页面某功能多次调用就用面向对象比如: tab选项卡、轮播之类的；

hml5 audio 的新的api 文上的连接讲比较详尽就不赘述了

遇到的个人一些小问题：

一：第一次用这个 zepto.js 感觉跟 jQuery 一样，不过这个 tap 的事件怎么绑定不上后来还是用 click 代替了之前听说在 click 在移动端有延迟也因为是用了 zepto 库还没绑定上完全用的跟 JQuery 似的也让我很尴尬，同时也因为用了库在 dom 的获取也用了原生所以在这个dom存储上有所难以区分(当然我知道这对象可以转成原生，最后还是用了纯原生的方式获取),因为 audio 有很多新的属性都需要原生；

二：单体的this 指向需要不停的存成 that在用有点繁琐；

三：歌曲时间想做到小时以上比如 : 01:02:05 这样后来在这个当前播放时间设置 _snowTime() 里判断一句就是 _toTime()返回当前播放秒数转成分钟形式的字符串 (如:00:00:00)里的":"的个数，在时间补零(00:00:05)上还要在用这个 ':'做判断觉得恶心，后来看了酷狗的播放器上过小时的也是用分钟的形式展示(120:30)目前还没想到什么好一点解决方法，也可以说是目前的一个已知 bug 吧；

四：最初的功能方法上想的比较独立单一，起初以为 “上一首歌”，“下一首歌”，和“歌曲播放到最后的下一首歌” 都是独立的其“歌曲播放到最后的下一首歌”其实之分两种一种是单曲循环，第二种是“下一首歌” 所以 “歌曲播放到最后的下一首歌” 区分不是 “单曲循环” 模式剩下都是 “下一首歌” 里的功能在“下一首歌”里做这个歌曲模式“随机”、“顺序”播放的下一首就可是了；

五：在做这个“歌曲进度”拖动的时候，和这个歌曲正常播放设置 “歌曲进度” 的冲突，后来建立that.dragBtn 判断是拖动还是仅仅是歌曲进度的设置，同样的问题还有这个当前歌曲的暂停之后的播放和切割之后的播放是有所不同的，歌曲的切换时是换了audio的路径需要audio.load() 从新加载才能播放同样创建了this.playing 来判断是否切歌；

六：歌曲模式的设置最开始想多了想建立一个 json {‘顺’，‘随’，‘单’} 做对应关系，后来发现其实只需要一个 num 做累加取余去判断即可；

功能总结：顺序播放、随机播放、单曲循环、上下换歌、点击切歌、拖动歌曲的进度；

没做功能：没有音控、手机转屏从新设置....没怎么做适配，仅仅适配自己的手机，肯定还有Bug和代码如何在优化欢迎指出；

谢谢大牛们写的技术文章做过的demo的共享~

DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
HTML5概述 WFIT~SKY Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
HTML添加文字若无心_. HTML html5
一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长
【拖拽】自定义拖拽图标风露_
一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed
Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别 Thomas游戏圈
一、Cocos2d和Cocos2dx的区别【开发语言】：Cocos2d是Object-C写的，Cocos2dx是C++写的，支持使用C++、Lua或Java进行开发。【运行平台】：Cocos2d只能在IOS下运行，Cocos2dx是跨平台的，适配iOS、Android、HTML5、Windows和Mac系统，功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】：Coco
web前端达到什么水平，才能找到工作？ cj瑾瑜前端 html javascript css css3
一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
HTML5（六）canvas 矩形、路径、画板功能祝名
一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
HTML5中的数据存储sessionStorage、localStorage 阿立聊代码 HTML实战 html5 前端 html
第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！ wcyd Web前端技术前端 html5 html
深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面
HTML5中`＜span＞`标签深入解析软考鸭 html5 html5 前端 html
引言在HTML5中，标签是一个行内元素，用于对文档中的一小部分文本或内容进行分组，以便于应用CSS样式或JavaScript脚本。与块级元素（如）不同，不会打断文本的流动，而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实
HTML5 `＜button＞` 标签深入全面解析软考鸭 html5 html5 前端 html
引言在HTML5中，标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。与相比，标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签，详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容，如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签的属性标签支持多种属性，用于定
HTML5之基础、元信息标签 Programmer.杨前端技术-HTML html meta head title 标签
标签声明位于文档中最前面的位置，处于标签之前。声明不是一个HTML标签，它是告知Web浏览器该页面使用了哪种HTML版本（规范），浏览器用此版本（规范）对该文档进行解析，渲染。可声明的DTD有三种：分别是严格版本（strict）、过渡版本（transitional）、以及基于框架的版本（frameset），若文档不遵循其DTD规范，则此文档中的代码不但不能通过代码校验，并且有可能无法正常显示。文档
HTML5中`＜ul＞`标签深入全面解析软考鸭 html5 html5 前端 html
在HTML5的广阔天地里，标签作为无序列表的代言人，扮演着举足轻重的角色。它不仅能够整洁地罗列信息，还通过丰富的属性和样式选项，为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核，详细解读其属性与样式，助力你打造更加精致、功能强大的网页。一、标签基础概览，即UnorderedList（无序列表）的缩写，用于在网页中展示一系列无特定顺序的项目。每个项目由（ListItem，列表项）标签包裹，
HTML5全面知识点 A_cot html html5 前端框架前端
HTML（HyperTextMarkupLanguage）是构建网页的基础语言。以下是全面的HTML知识点：一、HTML基础概念定义：HTML是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。版本历史：从HTML的早期版本发展到现在的HTML5，功能不断增强，支持更多的多媒体和交互特性。二、HTML文档结构声明：用于告诉浏览器文档类型是HTML5。标签：整个HTML文档的根元素
python提取数据库数据到前端html5显示_python html提取数据库数据 weixin_39878745
python开源工具列表【持续更新】以下是个人在工作中整理的一些pythonwheel，供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8个用于业余项目的优秀Python库
掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结！ weixin_45378258 HTML
今天由于在之前小编在项目中遇到的有关于：“在html5中使用video进行全屏播放与自动播放的代码方法总结！”这方面的内容，所以今天就来和大家分享有关于这方面的相关内容！近期开始开发公司新版官网，首页顶部（header）是一个全屏播放的小视频,现简单总结如下：页面代码：其中php简单判断了一下是否是移动设备,移动设备不展示视频(如果移动端展示的话,需要解决iOS上无法自动播放的问题):ps:如果H
Vue中使用pdfJs预览PDF、图片 viceen vue3+ts-运维 vue项目-运维 vue.js html html5
Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。实现步骤如下：1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是：file参数中默认只允许传简单路径比如：http://www
【WebKit深度解析】HTML5支持全景与实践指南 2401_85812026 webkit html5 前端
标题：【WebKit深度解析】HTML5支持全景与实践指南WebKit作为许多现代浏览器的核心技术，对HTML5的支持程度直接关系到Web应用的性能和体验。HTML5是构建现代Web应用的基石，提供了丰富的特性和API。本文将深入探讨WebKit对HTML5的支持程度，并通过实际代码示例，展示如何在WebKit浏览器上充分利用HTML5的强大功能。1.WebKit与HTML5概述WebKit是一个
HTML5 ＜video＞常用属性、时间、方法及基础使用说明 Wu Youlu java 前端 javascript
简介HTML元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。标签也可用于播放音频，但播放音频用更加适合。元素支持三种视频格式：MP4,WebM,和Ogg:MP4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件基础写法Yourbrowserdoesnot
WebAPI DOM文档对象模型 znhyXYG javascript 前端开发语言
DOM（文档对象模型）是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口一、获取元素方法：1、根据ID获取2、根据标签名获取3、根据类名获取（html5新增）4、querySelector获取（html5新增）5、querySelectorAll获取（html5新增）6、获取特殊元素（body、html）ID获取方法：document.getElementById(); 2019-9-9
使用fabric.js简简单单实现一个画板小草先森tyro 前端
什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
探索 Fabric.js：前端开发的轻量级图形编辑框架滑辰煦Marc
探索Fabric.js：前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库，专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象，包括文本、形状、图像等，并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型，使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用，还是实现动态
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码天眼查用html写出生日蛋糕
.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px
HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心 @秋天的笔记生日祝福网页html 520情人节告白网页制作七夕情人节表白网页源代码 HTML5七夕情人节动画网页 HTML生日快乐代码 3D旋转电子相册
HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤HTML+CSS+JS求婚html生日快乐祝福代码网页520情人节告白代码程序员表白源码抖音3D旋转相册js烟花代码css爱心表白这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。文章末尾-已经附上源码下载地址作者主页-更多源码1
记录-小程序720°VR（跳转H5页面实现）久违的小技巧小程序小程序 vr javascript
全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
HTML5与CSS3 Mousse.- html css 前端 html5 css3
HTML部分##什么是网页：1.网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。##网页的组成：1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。##什么是HTML：1
用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类） AdyZhang POJO eclipse Hibernate MiddleGenIDE
推荐:MiddlegenIDE插件, 是一个Eclipse 插件. 用它可以直接连接到数据库, 根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件! 今天开始试着使用
.9.png Cb123456 android
“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边
算法的效率天子之骄算法效率复杂度最坏情况运行时间大O阶平均情况运行时间
算法的效率效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。以下是我的学习笔记： 1.求值与霍纳法则，即为秦九韶公式。 2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。
java数据结构何必如此 java 数据结构
Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类：枚举（Enumeration）位集合（BitSet）向量（Vector）栈（Stack）字典（Dictionary）哈希表（Hashtable）属性（Properties）以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect
MybatisHelloWorld 3213213333332132
//测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat
Java|urlrewrite|URL重写|多个参数 7454103 java xml Web 工作
个人工作经验！如有不当之处，敬请指点 1.0 web -info 目录下建立 urlrewrite.xml 文件类似如下： <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE u
达梦数据库+ibatis darkranger sql mysql ibatis SQL Server
--插入数据方面如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert 数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam
XML 解析四种方式 aijuans android
XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object
spring中配置文件占位符的使用 avords
1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o
前端工程化-公共模块的依赖和常用的工作流 bee1314 webpack
题记：一个人的项目，还有工程化的问题嘛？我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？你真的想这样嘛？ var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。
上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？ bijian1013 项目管理沟通 IT职业规划
问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。 Eno-Bea回答，注重感受，不一定是别人的虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作
TortoiseSVN，过滤文件征客丶 SVN
环境： TortoiseSVN 1.8 配置：在文件夹空白处右键选择 TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件：多类型用英文空格分开 *name ：过滤所有名称为 name 的文件或文件夹 *.name ：过滤所有后缀为 name 的文件或文件夹 --------
【Flume二】HDFS sink细说 bit1129 Flume
1. Flume配置 a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan
The Eight Myths of Erlang Performance bookjovi erlang
erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html Myth: Funs are sl
java多线程网络传输文件(非同步)-2008-08-17 ljy325 java 多线程 socket
利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系
读《研磨设计模式》-代码笔记-模板方法模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;
配置心得 chenyu19891124 配置
时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。做了一年的配置管理给自总结下： 1.改变从一个以前对配置毫无
对“带条件选择的并行汇聚路由问题”的再思考 comsci 算法工作软件测试嵌入式领域模型
2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际
Oracle 10g 的clusterware 32位下载地址 daizj oracle
Oracle 10g 的clusterware 32位下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l
非常好的介绍：Linux定时执行工具cron dongwei_6688 linux
Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr
Yii assets目录生成及修改 dcj3sjt126com yii
assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php assets配置方法在m
mac工作软件推荐 dcj3sjt126com mac
mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼
Memcached(三)、封装Memcached和Ehcache frank1234 memcached ehcache spring ioc
本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?>
Remove Duplicates from Sorted List II hcx2013 remove
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,
Spring4新特性——注解、脚本、任务、MVC等其他特性改进 jinnianshilongnian spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
MySQL安装文档 liyong0802 mysql
工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。 Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二
使用VS2010构建HotSpot工程 p2p2500 HotSpot OpenJDK VS2010
1. 下载OpenJDK7的源码： http://download.java.net/openjdk/jdk7 http://download.java.net/openjdk/ 2. 环境配置 ▶
Oracle实用功能之分组后列合并 seandeng888 oracle 分组实用功能合并
1 实例解析由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下：表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs
Java定时任务注解方式实现 tuoni java spring jvm xml jni
Spring 注解的定时任务，有如下两种方式：第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http
11大Java开源中文分词器的使用方法和分词效果对比 yangshangchuan word分词器 ansj分词器 Stanford分词器 FudanNLP分词器 HanLP分词器
本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比

HTML5 播放器

你可能感兴趣的:(html5)