小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

黄舟

May 24, 2018 pm 02:40 PM

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下Html5的优势，我们开始制作一个漂亮的视频播放器吧先别急，在开始制作之前先了解一下视频文件的基本知识。

一、视频的格式

目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：

H.264(个人不看好)：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intenet Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。

Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。

VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。

AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。

MP3：也是一个专利技术，Safari、Chrome和Internet Explorer支持该音频编码器。

PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。

Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.

主流浏览器和设备支持的视频和音频

二、HTML5中的属性

在html5中可以使用

<video src="move.mp4"></video>

Salin selepas log masuk

video标签中有很多属性，例如controls属性可以控制是否有控制台。

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

Salin selepas log masuk

从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

Salin selepas log masuk

三、制作视频播放器

index.html

<!DOCTYPE html>  
<html>  
<head>  
<title>Demo 1 | Custom HTML5 Video Controls with jQuery</title>  
<link rel="stylesheet" href="../vendorstyle.css" />  
<link rel="stylesheet" href="style.css" />  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<!--[if lt IE 9]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->  
<script src="../vendorscript.js"></script>  
<script src="video.js"></script>  
<!--[if lt IE 9]>  
<script>  
$(document).ready(function() {  
    $(&#39;.control&#39;).hide();  
    $(&#39;.loading&#39;).fadeOut(500);  
    $(&#39;.caption&#39;).fadeOut(500);  
});  
</script>  
<![endif]-->  
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson/favicon.ico" />  
</head>  
  
<body>  
<!-- Header -->  
<header>  
    <h1>Custom HTML5 Video Controls with jQuery</h1>  
    <p id="backlinks">  
 <a href="http://www.inwebson.com/custom-html5-video-controls-with-jquery-and-css/">BACK TO ARTICLE »</a>  
        <a href="http://www.inwebson.com">Visit inWebson.com »</a>  
    </p>  
    <p class="clearfix"></p>  
</header>  
  
<!-- Content -->  
<section id="wrapper">  
  
    <!-- Title -->  
    <h2>Demo 1</h2>  
    <h3>Custom HTML5 Video Controls</h3>  
  
<p class="videoContainer">  
      
    <video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" >  
      <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
      <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
      <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
      <p>Your browser does not support the video tag.</p>  
    </video>  
    <p class="caption">This is HTML5 video with custom controls</p>  
    <p class="control">  
  
        <p class="topControl">  
            <p class="progress">  
                <span class="bufferBar"></span>  
                <span class="timeBar"></span>  
            </p>  
            <p class="time">  
                <span class="current"></span> /   
                <span class="duration"></span>   
            </p>  
        </p>  
          
        <p class="btmControl">  
            <p class="btnPlay btn" title="Play/Pause video"></p>  
            <p class="btnStop btn" title="Stop video"></p>  
            <p class="spdText btn">Speed: </p>  
            <p class="btnx1 btn text selected" title="Normal speed">x1</p>  
            <p class="btnx3 btn text" title="Fast forward x3">x3</p>  
            <p class="btnFS btn" title="Switch to full screen"></p>  
            <p class="btnLight lighton btn" title="Turn on/off light"></p>  
            <p class="volume" title="Set volume">  
                <span class="volumeBar"></span>  
            </p>  
            <p class="sound sound2 btn" title="Mute/Unmute sound"></p>  
        </p>  
          
    </p>  
    <p class="loading"></p>  
</p>  
  
    <!-- Navigation -->  
    <nav id="navigation">  
        <ul>  
            <li class="currentbtn"><a href="#" title="Demo 1">DEMO 1</a></li>  
            <li><a href="../demo2/" title="Demo 2">DEMO 2</a></li>  
        </ul>  
        <p class="clearfix"></p>      
    </nav>  
</section>  
  
<!-- Footer -->  
<footer>  
    <span>© 2011 <a href="http://www.inwebson.com">inWebson.com</a>. 
    Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. 
    Powered by <a href="http://www.inwebson.com/html5/">HTML5</a> and 
    <a href="http://www.inwebson.com/jquery/">jQuery</a>.</span>  
</footer>  
</body>  
</html>

Salin selepas log masuk

style.css

/* video container */  
.videoContainer{  
    width:600px;  
    height:350px;  
    position:relative;  
    overflow:hidden;  
    background:#000;  
    color:#ccc;  
}  
  
/* video caption css */  
.caption{  
    display:none;  
    position:absolute;  
    top:0;  
    left:0;  
    width:100%;  
    padding:10px;  
    color:#ccc;  
    font-size:20px;  
    font-weight:bold;  
    box-sizing: border-box;  
    -ms-box-sizing: border-box;  
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    background: #1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
  
/*** VIDEO CONTROLS CSS ***/  
/* control holder */  
.control{  
    background:#333;  
    color:#ccc;  
    position:absolute;  
    bottom:0;  
    left:0;  
    width:100%;  
    z-index:5;  
    display:none;  
}  
/* control top part */  
.topControl{  
    height:11px;  
    border-bottom:1px solid #404040;  
    padding:1px 5px;  
    background:#1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
/* control bottom part */  
.btmControl{  
    clear:both;  
    background: #1F1F1F; /* fallback */  
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
}  
.control p.btn {  
    float:left;  
    width:34px;  
    height:30px;  
    padding:0 5px;  
    border-right:1px solid #404040;  
    cursor:pointer;  
}  
.control p.text{  
    font-size:12px;  
    font-weight:bold;  
    line-height:30px;  
    text-align:center;  
    font-family:verdana;  
    width:20px;  
    border:none;  
    color:#777;  
}  
.control p.btnPlay{  
    background:url(control.png) no-repeat 0 0;  
    border-left:1px solid #404040;  
}  
.control p.paused{  
    background:url(control.png) no-repeat 0 -30px;  
}  
.control p.btnStop{  
    background:url(control.png) no-repeat 0 -60px;  
}  
.control p.spdText{  
    border:none;  
    font-size:14px;  
    line-height:30px;  
    font-style:italic;  
}  
.control p.selected{  
    font-size:15px;  
    color:#ccc;  
}  
.control p.sound{  
    background:url(control.png) no-repeat -88px -30px;  
    border:none;  
    float:right;  
}  
.control p.sound2{  
    background:url(control.png) no-repeat -88px -60px !important;  
}  
.control p.muted{  
    background:url(control.png) no-repeat -88px 0 !important;  
}  
.control p.btnFS{  
    background:url(control.png) no-repeat -44px 0;  
    float:right;  
}  
.control p.btnLight{  
    background:url(control.png) no-repeat -44px -60px;  
    border-left:1px solid #404040;  
    float:right;  
}  
.control p.lighton{  
    background:url(control.png) no-repeat -44px -30px !important;  
}  
  
/* PROGRESS BAR CSS */  
/* Progress bar */  
.progress {  
    width:85%;  
    height:10px;  
    position:relative;  
    float:left;  
    cursor:pointer;  
    background: #444; /* fallback */  
    background:-moz-linear-gradient(top,#666,#333);  
    background:-webkit-linear-gradient(top,#666,#333);  
    background:-o-linear-gradient(top,#666,#333);  
    box-shadow:0 2px 3px #333 inset;  
    -moz-box-shadow:0 2px 3px #333 inset;  
    -webkit-box-shadow:0 2px 3px #333 inset;  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
}  
.progress span {  
    height:100%;  
    position:absolute;  
    top:0;  
    left:0;  
    display:block;  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
}  
.timeBar{  
    z-index:10;  
    width:0;  
    background: #3FB7FC; /* fallback */  
    background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
    box-shadow:0 0 1px #fff;  
    -moz-box-shadow:0 0 1px #fff;  
    -webkit-box-shadow:0 0 1px #fff;  
}  
.bufferBar{  
    z-index:5;  
    width:0;  
    background: #777;  
    background:-moz-linear-gradient(top,#999,#666);  
    background:-webkit-linear-gradient(top,#999,#666);  
    background:-o-linear-gradient(top,#999,#666);  
    box-shadow:2px 0 5px #333;  
    -moz-box-shadow:2px 0 5px #333;  
    -webkit-box-shadow:2px 0 5px #333;  
}  
/* time and duration */  
.time{  
    width:15%;  
    float:right;  
    text-align:center;  
    font-size:11px;  
    line-height:12px;  
}  
  
/* VOLUME BAR CSS */  
/* volume bar */  
.volume{  
    position:relative;  
    cursor:pointer;  
    width:70px;  
    height:10px;  
    float:right;  
    margin-top:10px;  
    margin-right:10px;  
}  
.volumeBar{  
    display:block;  
    height:100%;  
    position:absolute;  
    top:0;  
    left:0;  
    background-color:#eee;  
    z-index:10;  
}  
  
/* OTHERS CSS */  
/* video screen cover */  
.loading, #init{  
    position:absolute;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    background:url(loading.gif) no-repeat 50% 50%;  
    z-index:2;  
    display:none;  
}  
#init{  
    background:url(bigplay.png) no-repeat 50% 50% !important;  
    cursor:pointer;  
}

Salin selepas log masuk

video.js

$(document).ready(function(){  
    //INITIALIZE  
    var video = $(&#39;#myVideo&#39;);  
      
    //remove default control when JS loaded  
    video[0].removeAttribute("controls");  
    $(&#39;.control&#39;).show().css({&#39;bottom&#39;:-45});  
    $(&#39;.loading&#39;).fadeIn(500);  
    $(&#39;.caption&#39;).fadeIn(500);  
   
    //before everything get started  
    video.on(&#39;loadedmetadata&#39;, function() {  
        $(&#39;.caption&#39;).animate({&#39;top&#39;:-45},300);  
              
        //set video properties  
        $(&#39;.current&#39;).text(timeFormat(0));  
        $(&#39;.duration&#39;).text(timeFormat(video[0].duration));  
        updateVolume(0, 0.7);  
              
        //start to get video buffering data   
        setTimeout(startBuffer, 150);  
              
        //bind video events  
        $(&#39;.videoContainer&#39;)  
        .append(&#39;<p id="init"></p>&#39;)  
        .hover(function() {  
            $(&#39;.control&#39;).stop().animate({&#39;bottom&#39;:0}, 500);  
            $(&#39;.caption&#39;).stop().animate({&#39;top&#39;:0}, 500);  
        }, function() {  
            if(!volumeDrag && !timeDrag){  
                $(&#39;.control&#39;).stop().animate({&#39;bottom&#39;:-45}, 500);  
                $(&#39;.caption&#39;).stop().animate({&#39;top&#39;:-45}, 500);  
            }  
        })  
        .on(&#39;click&#39;, function() {  
            $(&#39;#init&#39;).remove();  
            $(&#39;.btnPlay&#39;).addClass(&#39;paused&#39;);  
            $(this).unbind(&#39;click&#39;);  
            video[0].play();  
        });  
        $(&#39;#init&#39;).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;  
        $(&#39;.bufferBar&#39;).css(&#39;width&#39;,perc+&#39;%&#39;);  
              
        if(currentBuffer < maxduration) {  
            setTimeout(startBuffer, 500);  
        }  
    };    
      
    //display current video play time  
    video.on(&#39;timeupdate&#39;, function() {  
        var currentPos = video[0].currentTime;  
        var maxduration = video[0].duration;  
        var perc = 100 * currentPos / maxduration;  
        $(&#39;.timeBar&#39;).css(&#39;width&#39;,perc+&#39;%&#39;);      
        $(&#39;.current&#39;).text(timeFormat(currentPos));   
    });  
      
    //CONTROLS EVENTS  
    //video screen and play button clicked  
    video.on(&#39;click&#39;, function() { playpause(); } );  
    $(&#39;.btnPlay&#39;).on(&#39;click&#39;, function() { playpause(); } );  
    var playpause = function() {  
        if(video[0].paused || video[0].ended) {  
            $(&#39;.btnPlay&#39;).addClass(&#39;paused&#39;);  
            video[0].play();  
        }  
        else {  
            $(&#39;.btnPlay&#39;).removeClass(&#39;paused&#39;);  
            video[0].pause();  
        }  
    };  
      
    //speed text clicked  
    $(&#39;.btnx1&#39;).on(&#39;click&#39;, function() { fastfowrd(this, 1); });  
    $(&#39;.btnx3&#39;).on(&#39;click&#39;, function() { fastfowrd(this, 3); });  
    var fastfowrd = function(obj, spd) {  
        $(&#39;.text&#39;).removeClass(&#39;selected&#39;);  
        $(obj).addClass(&#39;selected&#39;);  
        video[0].playbackRate = spd;  
        video[0].play();  
    };  
      
    //stop button clicked  
    $(&#39;.btnStop&#39;).on(&#39;click&#39;, function() {  
        $(&#39;.btnPlay&#39;).removeClass(&#39;paused&#39;);  
        updatebar($(&#39;.progress&#39;).offset().left);  
        video[0].pause();  
    });  
      
    //fullscreen button clicked  
    $(&#39;.btnFS&#39;).on(&#39;click&#39;, function() {  
        if($.isFunction(video[0].webkitEnterFullscreen)) {  
            video[0].webkitEnterFullscreen();  
        }     
        else if ($.isFunction(video[0].mozRequestFullScreen)) {  
            video[0].mozRequestFullScreen();  
        }  
        else {  
            alert(&#39;Your browsers doesn\&#39;t support fullscreen&#39;);  
        }  
    });  
      
    //light bulb button clicked  
    $(&#39;.btnLight&#39;).click(function() {  
        $(this).toggleClass(&#39;lighton&#39;);  
          
        //if lightoff, create an overlay  
        if(!$(this).hasClass(&#39;lighton&#39;)) {  
            $(&#39;body&#39;).append(&#39;<p class="overlay"></p>&#39;);  
            $(&#39;.overlay&#39;).css({  
                &#39;position&#39;:&#39;absolute&#39;,  
                &#39;width&#39;:100+&#39;%&#39;,  
                &#39;height&#39;:$(document).height(),  
                &#39;background&#39;:&#39;#000&#39;,  
                &#39;opacity&#39;:0.9,  
                &#39;top&#39;:0,  
                &#39;left&#39;:0,  
                &#39;z-index&#39;:999  
            });  
            $(&#39;.videoContainer&#39;).css({  
                &#39;z-index&#39;:1000  
            });  
        }  
        //if lighton, remove overlay  
        else {  
            $(&#39;.overlay&#39;).remove();  
        }  
    });  
      
    //sound button clicked  
    $(&#39;.sound&#39;).click(function() {  
        video[0].muted = !video[0].muted;  
        $(this).toggleClass(&#39;muted&#39;);  
        if(video[0].muted) {  
            $(&#39;.volumeBar&#39;).css(&#39;width&#39;,0);  
        }  
        else{  
            $(&#39;.volumeBar&#39;).css(&#39;width&#39;, video[0].volume*100+&#39;%&#39;);  
        }  
    });  
      
    //VIDEO EVENTS  
    //video canplay event  
    video.on(&#39;canplay&#39;, function() {  
        $(&#39;.loading&#39;).fadeOut(100);  
    });  
      
    //video canplaythrough event  
    //solve Chrome cache issue  
    var completeloaded = false;  
    video.on(&#39;canplaythrough&#39;, function() {  
        completeloaded = true;  
    });  
      
    //video ended event  
    video.on(&#39;ended&#39;, function() {  
        $(&#39;.btnPlay&#39;).removeClass(&#39;paused&#39;);  
        video[0].pause();  
    });  
  
    //video seeking event  
    video.on(&#39;seeking&#39;, function() {  
        //if video fully loaded, ignore loading screen  
        if(!completeloaded) {   
            $(&#39;.loading&#39;).fadeIn(200);  
        }     
    });  
      
    //video seeked event  
    video.on(&#39;seeked&#39;, function() { });  
      
    //video waiting for more data event  
    video.on(&#39;waiting&#39;, function() {  
        $(&#39;.loading&#39;).fadeIn(200);  
    });  
      
    //VIDEO PROGRESS BAR  
    //when video timebar clicked  
    var timeDrag = false;   /* check for drag event */  
    $(&#39;.progress&#39;).on(&#39;mousedown&#39;, function(e) {  
        timeDrag = true;  
        updatebar(e.pageX);  
    });  
    $(document).on(&#39;mouseup&#39;, function(e) {  
        if(timeDrag) {  
            timeDrag = false;  
            updatebar(e.pageX);  
        }  
    });  
    $(document).on(&#39;mousemove&#39;, function(e) {  
        if(timeDrag) {  
            updatebar(e.pageX);  
        }  
    });  
    var updatebar = function(x) {  
        var progress = $(&#39;.progress&#39;);  
          
        //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;  
        }  
        $(&#39;.timeBar&#39;).css(&#39;width&#39;,percentage+&#39;%&#39;);    
        video[0].currentTime = maxduration * percentage / 100;  
    };  
  
    //VOLUME BAR  
    //volume bar event  
    var volumeDrag = false;  
    $(&#39;.volume&#39;).on(&#39;mousedown&#39;, function(e) {  
        volumeDrag = true;  
        video[0].muted = false;  
        $(&#39;.sound&#39;).removeClass(&#39;muted&#39;);  
        updateVolume(e.pageX);  
    });  
    $(document).on(&#39;mouseup&#39;, function(e) {  
        if(volumeDrag) {  
            volumeDrag = false;  
            updateVolume(e.pageX);  
        }  
    });  
    $(document).on(&#39;mousemove&#39;, function(e) {  
        if(volumeDrag) {  
            updateVolume(e.pageX);  
        }  
    });  
    var updateVolume = function(x, vol) {  
        var volume = $(&#39;.volume&#39;);  
        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  
        $(&#39;.volumeBar&#39;).css(&#39;width&#39;,percentage+&#39;%&#39;);      
        video[0].volume = percentage / 100;  
          
        //change sound icon based on volume  
        if(video[0].volume == 0){  
            $(&#39;.sound&#39;).removeClass(&#39;sound2&#39;).addClass(&#39;muted&#39;);  
        }  
        else if(video[0].volume > 0.5){  
            $(&#39;.sound&#39;).removeClass(&#39;muted&#39;).addClass(&#39;sound2&#39;);  
        }  
        else{  
            $(&#39;.sound&#39;).removeClass(&#39;muted&#39;).removeClass(&#39;sound2&#39;);  
        }  
          
    };  
  
    //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;  
    };  
});

Salin selepas log masuk

以上就是小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7564

Tutorial CakePHP

1386

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles