• WEB前端第七课——视频、音频、图形


    1.<video></video>

      用于定义视频,如影视片段

      语法<video src="XXXmovie.mp4" controls></video>

      支持视频格式:mp4、ogg移动端、webM高清

      常用属性:

          src,视频的地址url

          autoplay,视频就绪后自动播放

          controls,向用户显示播放器控件

          width,设置视频的播放器的宽度

          height,设置视频的播放器的高度

          loop,定义自动循环播放,默认无限循环,属性值可设置次数

          muted,定义音频输出默认为静音

          poster,设定视频下载时显示的图像,或在用户点击播放按钮前显示的图像,值为url

          preload,视频在页面加载时进行加在,并预备播放,如果使用“autoplay”则忽略该属性

    2.<audio></audio>

      用于定义声音,如音乐

      语法<audio src="xxxmusic.mp3" autoplay></audio>

      支持音频格式:mp3、ogg、wav

      常用属性与video类似

          src,视频的地址url

          autoplay,视频就绪后自动播放

          controls,向用户显示播放器控件

          loop,定义自动循环播放,默认无限循环,属性值可设置次数

          muted,定义音频输出默认为静音

          preload,视频在页面加载时进行加在,并预备播放,如果使用“autoplay”则忽略该属性

    3.<source></source>

      为媒介元素(如<video>和<audio>)定义媒介资源

      <source>允许设定可替换的视频/音频文件,供浏览器根据它对媒体类型或编码器的支持进行选择

      语法示例:

        <audio>
            <source src="Getit.ogg">
            <source src="Getit.mp3">
        </audio>
    

    4.<embed/>

      用于定义嵌入的内容, 如插件,也可以用了嵌入声音

      语法<embed src=""/>,必须设置src属性

    5.<canvas></canvas>

      canvas是一个容器(画布),可以通过控制坐标在canvas上绘制图形,一般配合js使用能实现非常复杂的动画效果

      canvas拥有多种绘制路径、矩形、圆形等,可以控制区域内每一个像素

      语法示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>画布测试</title>
        <!-- 通过css设置背景颜色 -->
        <style type="text/css">
            canvas{
                background-color: aliceblue;
            }
        </style>
    </head>
    <body>
        <!--创建画布,默认为无色填充的一个矩形区域-->
        <canvas id="canvastest" width="600" height="600">
            您的浏览器版本过低,不支持canvas!
        </canvas>
    </body>
    </html>
    
  • 相关阅读:
    C# WPF透明黑色样式窗口
    ExtJS速学
    编译away3d例程序记
    用VC加载Lua.lib,C++调用lua脚本函数
    mysql数据库备份
    Google TTS(文字转语音)api 2
    C Sharp Coding Standards
    微信公众平台功能大杂烩 ip/域名查询 车牌号归属地查询 手机归属地查询 公交查询 英汉互译
    google jsapi学习记录
    Google TTS(文字转语音)api
  • 原文地址:https://www.cnblogs.com/husa/p/13336972.html
Copyright © 2020-2023  润新知