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

i see the future

于 2021-05-12 17:41:42 发布

阅读量100

点赞数

分类专栏： HTML/CSS/JS/Bootstrap

本文链接：https://blog.csdn.net/m0_46629123/article/details/116599968

版权

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 7 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>My Video</title>
        <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">MP4</a>
                </p>
            </video>
        </div>
        <script src="scripts/player.js"></script>
    </body>
</html>

在这里插入图片描述

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 = '&#x25BA';

    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 = "&#x2590;&#x2590;";
        play.setAttribute('paused',true);
    },false);

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

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


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

注意一下addEventListener方法为视频添加事件。
在这里插入图片描述
#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;
}

在这里插入图片描述

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，表示必填。

其他略过。

i see the future

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript_DOM编程艺术》Chapter11 HTML5 --20210511

11.1 HTML5可查看http://www.w3.org/TR/结构层中，HTML5添加了新的标记元素，如< section>、< article>、< headed>、< footer>、< canvas>、< audio>和< video>等；还增加了一些新特性，如表单得到了加强，新增了颜色拾取器、数据选择器、滑动条和进度条等；除此之外，很多新元素还带有自己的JavaScript和DOM API。行为层中，H
复制链接

扫一扫