《JavaScript_DOM编程艺术》Chapter11 HTML5 --20210511

11.1 HTML5

可查看http://www.w3.org/TR/

  • 结构层中,HTML5添加了新的标记元素,如< section>、< article>、< headed>、< footer>、< canvas>、< audio>和< video>等;还增加了一些新特性,如表单得到了加强,新增了颜色拾取器、数据选择器、滑动条和进度条等;除此之外,很多新元素还带有自己的JavaScript和DOM API。
  • 行为层中,HTML5规定了DOM中每个新元素的交互方式以及新的API,例如可以自定义< video>元素的控件,改变其播放方式;< form>元素支持进度控制;< canvas>元素可以绘制各种图形和添加图片及其他对象。
  • 表现层中,CSS3中的多个模块囊括了高级选择器、渐变、变换还有动画。
  • 新JavaScript API还包括其他很多模块,比如Geolocation、Storage、Drop-and-Drop、Socket以及多线程等。

11.2 Modernizr

Modernizr是一个开源的JavaScript库,可以提供HTML5、CSS3的特性检测,可以对HTML5文档进行更好的控制。

11.3 几个示范

11.3.1 Canvas

略过

11.3.2 音频和视频

不管创建什么控件,都切记在< video>元素中添加control属性,< video src=“movie.mp4” controls>,想要自定义控件的外观或者添加新的控件,可以通过< video>元素的DOM属性来实现,包括:

  • currentTime,返回当前播放的位置,以秒表示;
  • duration,返回媒体的总时长,以秒表示,对于流媒体返回无穷大;
  • paused,表示媒体是否处于暂停状态。

与一些特定媒体相关的事件主要有:

  • play,在媒体播放开始时发生;
  • pause,在媒体暂停时发生;
  • loadeddata,在媒体可以从当前播放位置开始播放时发生;
  • ended,在媒体已播放完成而停止时发生。

video内置控件

#movie.html


<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>My Videotitle>
        <link rel="stylesheet" href="styles/player.css">
    head>
    <body>
        <div class="video">
            <video id="movie" controls>
                <source src="movie.mp4" />
                <p>Download movie as 
                    <a href="movie.mp4">MP4a>
                p>
            video>
        div>
        <script src="scripts/player.js">script>
    body>
html>

《JavaScript_DOM编程艺术》Chapter11 HTML5 --20210511_第1张图片

video自定义控件

在player.js文件中,我们要修改页面中的所有< video >元素,删除其内置控件并添加自定义的Play按钮。
#player.js

function createVideoControls(){
     
    var vids = document.getElementsByTagName('video');
    for (var i=0; i<vids.length; i++){
     
        addControls(vids[i]);
    }
}

function addControls(vid){
     
    vid.removeAttribute('controls');

    vid.height = vid.videoHeight;
    vid.width = vid.videoWidth;
    vid.parentNode.style.height = vid.videoHeight + 'px';
    vid.parentNode.style.width = vid.videoWidth + 'px';

    var controls  = document.createElement('div');
    controls.setAttribute('class','controls');

    var play = document.createElement('button');
    play.setAttribute('title','Play');
    play.innerHTML = '►';

    controls.appendChild(play);

    vid.parentNode.insertBefore(controls,vid);

    play.onclick = function(){
     
        if (vid.ended){
     
            vid.currentTime = 0;
        }
        if (vid.paused){
     
            vid.play();
        }else{
     
            vid.pause();
        }
    }

    vid.addEventListener('play',function(){
     
        play.innerHTML = "▐▐";
        play.setAttribute('paused',true);
    },false);

    vid.addEventListener('pause',function(){
     
        play.removeAttribute('paused');
        play.innerHTML = "►";
        play.setAttribute('paused',true);
    },false);

    vid.addEventListener('ended',function(){
     
        vid.pause();
    },false);
}


window.onload = function(){
     
    createVideoControls();
}

注意一下addEventListener方法为视频添加事件。
《JavaScript_DOM编程艺术》Chapter11 HTML5 --20210511_第2张图片
#player.css

.video-wrapper{
     
    overflow: hidden;
}

.video-wrapper .controls{
     
    position: absolute;
    height: 30px;
    width: 30px;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
}

.video-wrapper button{
     
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    font-size: 17px;
    color: #fff;
    background: transparent;
}

.video-wrapper button[paused]{
     
    font-size: 12px;
}

《JavaScript_DOM编程艺术》Chapter11 HTML5 --20210511_第3张图片

11.3.3 表单

HTML5中表单新的输入控件类型包括:

  • email,用于输入电子邮件地址;
  • url,用于输入URL;
  • date,用于输入日期和时间;
  • number,用于输入数值;
  • range,用于生成滑动条;
  • search,用于搜索框;
  • tel,用于输入电话号码;
  • color,用于选择颜色。

HTML5中表单新的属性包括:

  • autocomplete,用于为文本(text)输入框添加一组建议的输入项;
  • autofocus,用于让表单元素自动获得焦点;
  • form,用于对< form>标签外部的表单元素分组;
  • min、max和step,用在范围(range)和数值(number)输入框中;
  • pattern,用于定义宇哥正则表达式,以便验证输入的值;
  • placeholder,用于在文本输入框中显示临时性的提示信息;
  • required,表示必填。

其他略过。

你可能感兴趣的:(笔记)