zoukankan      html  css  js  c++  java
  • 三十七:HTML5之HTML5标签变化之新增的多媒体标签和简单的使用示例

    多媒体标签的出现意味着富媒体的发展及支持不使用插件的情况下即可操作媒体文件,极大的提升了用户体验

    三类多媒体资源:

      video:标记定义一个视频

      audio:标记定义音频内容

      source:标记定义媒体资源

    1.audio标签

      autopaly:自动播放

      loop:循环次数:-1为无限循环

      controls:默认播放控制器

    如果非MP3格式的音频,则需要使用source标签引入,并且声明转码

     

    2.video标签

      autopaly:自动播放

      controls:默认播放控制器

      width:宽度

      height:高度

    如果非MP4格式的音频,则需要使用source标签引入,并且声明转码

    3.canvas:标记定义图片,需与js配合使用,后面演示

    4.embed:标记定义外部的可交互的内容或插件,比如flash

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <audio src="音频.mp3" autoplay="autoplay" controls="controls">
    当浏览器不能识别audio标签的时候,会渲染此文字,可用于提示用户
    </audio>
    <br><br><br>

    <audio autoplay="autoplay" controls="controls">
    <source src="音频.mp3" type="audio/mpeg"> <!-- 声明转码mp3 -->
    当浏览器不能识别audio标签的时候,会渲染此文字,可用于提示用户
    </audio>
    <br><br><br>

    <video src="视频.mp4" autoplay="autoplay" controls="controls"></video>
    <br><br><br>

    <video autoplay="autoplay" controls="controls">
    <source src="视频.mp4" type="audio/mp4"> <!-- 声明转码mp4 -->
    </video>
    <br><br><br>

    <embed src="flash文件.swf" width="300px" height="200px">
    <br><br><br>

    </body>
    </html>
    讨论群:249728408
  • 相关阅读:
    程序语言 -- Python面向对象
    程序语言 -- Python入门
    Git小白 -- GitHub的使用
    Markdown
    Git小白 -- GitHub 静态博客
    Hadoop详解一:Hadoop简介
    基于七牛Python SDK写的一个批量下载脚本
    基于七牛Python SDK写的一个同步脚本
    Python selenium的js扩展实现
    关于敏捷和自动化测试的一点心得
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/14094140.html
Copyright © 2011-2022 走看看