• HTML5(简介、视频、音频、画布)


    HTML5(简介、视频、音频、画布)

    HTML5目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求。HTML5将成为HTMLXHTMLHTML DOM的新标准。

     

    广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如:AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网络应用的标准集。

     

    具体来说,HTML5添加了许多新的语法特征,其中包括用于绘画的 <canvas> 元素,用于媒介回放的< video >和 <audio >元素,这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<nav>、<header>和<footer>则是为了丰富文档的数据内容。此外还有新的表单控件,比如 <calendar>、<date>、<time>、<email>、<url>、<search>。同时也有一些属性和元素被移除掉了,一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。

     

    HTML5 提供了展示视频的标准。当前video元素支持三种视频格式:ogg、MPEG4、WebM。

     

    在HTML5中添加视频:

    <video width="320" height="240" controls="controls">

      <source src="movie.ogg" type="video/ogg">

      <source src="movie.mp4" type="video/mp4">

    Your browser does not support the video tag.

    </video>

     

    <video>属性标签:

    autoplay:自动播放视频。

    controls:向用户显示控件,比如播放、暂停和音量按钮。

    height: 设置播放器的高度。

    width:设置播放器的宽度。

    loop:循环播放。

    preload:视频预加载。

    src:要播放的视频URL。

     

    <video>的方法、属性及事件

    play()              currentSrc         play

    pause()          currentTime       pause

    load()             videoWidth        progress

    canPlayType  videoHeight       error

                          duration             timeupdate

                          ended                 ended

                          error                   abort

                          paused               empty

                          muted                emptied

                          seeking              waiting

                          volume               loadedmetadata

                          height

                          width  

     

    <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

     

     

    HTML5 提供了播放音频的标准。当前,audio 元素支持三种音频格式:Ogg Vorbis、MP3、Wav。

     

    在 HTML5 中播放音频:

    <audio controls="controls">

      <source src="song.ogg" type="audio/ogg">

      <source src="song.mp3" type="audio/mpeg">

    Your browser does not support the audio tag.

    </audio>

    <audio>属性标签和<video>一样。

     

    canvas 元素用于在网页上绘制图形。

     

    向 HTML5 页面添加 canvas 元素:

    规定元素的 id、宽度和高度:

    <canvas id="myCanvas" width="200" height="100"></canvas>

     

    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    <script type="text/javascript">

    var c=document.getElementById("myCanvas");

    var cxt=c.getContext("2d");

    cxt.fillStyle="#FF0000";

    cxt.fillRect(0,0,150,75);

    </script>

     

    JavaScript 使用 id 来寻找 canvas 元素:

    var c=document.getElementById("myCanvas");

     

    然后,创建 context 对象:

    var cxt=c.getContext("2d");

     

    getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    下面的两行代码绘制一个红色的矩形:

     

    cxt.fillStyle="#FF0000";

    cxt.fillRect(0,0,150,75);

     

    fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

    参数 (0,0,150,75)。从左上角开始 (0,0),在画布上绘制 150x75 的矩形。

     

  • 相关阅读:
    laravel 使用 php artisan make:model到指定目录(controller同理)
    Mysql常见的优化策略
    laravel路由别名
    laravel whereNotIn where子查詢
    phpstorm界面不停的indexing,不停的闪烁
    Linux下Redis开机自启(Centos6)
    数据结构常用算法
    困惑的前置操作与后置操作
    SSH框架整合中Hibernate实现Dao层常用结构
    过滤器与拦截器区别
  • 原文地址:https://www.cnblogs.com/carls/p/5372207.html
Copyright © 2020-2023  润新知