• 《HTML5高级程序设计》知识点概要(不涉及详细语法)


    不断更新。

    说明:主要记录html5中的一些注意点或知识点,尽量不涉及具体语法信息。

    一、CANVAS:

    检测:

    try{              
    document.createElement("canvas").getContext("2d");
    console.log("support"); }catch(e){ console.log("not support"); }

    典型应用:热力图、玻璃窗(全页玻璃窗,引导或记录用户行为)、游戏等

    玻璃窗使用注意:

        1. canvas的position:absolute; 必须指定大小,否则为0

        2.canvas的 z-index需要大一些至顶层

        3.会阻塞后续事件的访问,不需要时应关闭

    使用注意:

        1.绘制工作通常以原点为起点;

        2.在展现图像之前要先完成加载(图像加载完成检测);

        3.使用外部来源图片时要小心,且不能对跨域引用的canvas对象使用getImageData等像素数据操作函数,会抛出异常。

    二、AUDIO/VIDEO

    检测video:

    var hasVideo = !!(document.createElement("video").canPlayType);

    检测动态创建的video元素是否支持fooType类型视频:

    var supportsFooVideo = !!(document.createElement("video").canPlayType("fooType"));

    video常见用法及功能:创建时序查看器、鼠标悬停播放视频。

    容器文件(container)与 编解码器(codec):

        1.视频容器文件包含:视频轨道、音频轨道、元数据;支持:avi,flv,mp4,mkv,ovg格式;

        2.编码器是一组算法,用来解码和编码;音频编解码器:AAC,MPEG-3,OGG Vorbis;视频编解码器:H.264,VP8,Ogg Theora;

        3.WebM视频格式 -- 兼容

    缺点:缺少通用编解码器支持;

    限制:

        1.流式音频和视频,对视频的支持只限于加载的全部媒体文件;

        2.跨源(cross-orgin)资源共享限制;

        3.全屏视频无法通过脚本控制;

        4.对audio和video元素的访问尚未午安去键入规范中,基于流行字幕格式SRT的字幕支持规范(WebSRT)仍在编写中。

    注意: 如果开发人员有足够的理由对页面的音频或视频使用autoplay,一定要确保提供关闭自动播放的功能。

    audio多备选源更好的兼容各种类型音频:

    <audio  controls>
        <source src = "low step up.ogg">
        <source src = "low step up.mp3">
        多备选源
    </audio>

    video特性:可被HTML5 Canvas调用,audio不可以。

    audio/video演示(HTML5,不支持的浏览器无法演示):

       1. audio: FF目前不支持mp3格式,所以播放器会闪一下消失。

        

        2.video:

        

    扩展阅读:(译)html5中一个简单mp3播放器的audio标签回退比你想象的要难

    三、Geolocation API

    检测:

    if(navigator.geolocation){
          console.log("support");
    } else{
          console.log("not support");
    }

    应用场景:商铺位置共享、路程计算应用、GPS导航社交网络应用;

    两种类型定位请求:单次定位请求和重复性位置更新请求;

    位置信息来源及优缺点比较:

      位置信息来源   实现 优点 缺点
    1 IP   自动查找用户的IP地址,检索其注册的无力地址 任何地方都可用、在服务器端处理 不精确(城市级)、运算代价大
                  2 三维坐标 GPS 收集GPS卫星信号 精确 定位时间长(用户耗电量大)、室内效果不好、需要额外硬件设备
    RFID、WIFI、蓝牙的MAC地址 到wifi接入点的三角距离计算 精确、可在室内使用、可以简单快捷定位 无线计入点少的地区效果不好(如乡村)
    GSM或CDMA手机的ID 到基站的三角距离计算 相当准确、可在室内使用、可以简单快捷定位 需要能够访问手机或其modem的设备、在基站较少的偏远地区效果不好
    3 用户自定义数据   用户输入 更准确、允许地理定位服务的结果作为备用位置信息、比自动检测更快 可能很不准确、特别是当用户位置改变后

    隐私策略注意:

    1、应用程序不能直接访问设备,只能请求浏览器来代表它访问设备。

    2、访问/调用HTML5 Geolocation代码会触发隐私保护机制,不调用不触发。

    3、属于敏感信息,如果用户没有授权存储这些数据,应在执行任务完毕后删除。

    4、传输位置数据应加密。

  • 相关阅读:
    jquery防冲突的写法
    easyUI.checkForm
    获取树形节根节点下面所有层级子节点
    自动发布web应用程序或者网站
    MVC UI Jquery
    Linq模糊查询
    常用正则表达式示例
    Easy UI中,当批量操作后,移除总复选框的选中状态
    常用的JS
    检查是否安装或运行了IIS服务
  • 原文地址:https://www.cnblogs.com/zldream1106/p/3369321.html
Copyright © 2020-2023  润新知