美文网首页
HTML多媒体标签

HTML多媒体标签

作者: MGd | 来源:发表于2017-02-13 19:16 被阅读100次

video标签

  • 格式1:
    <video src="">
    </video>
  • 作用: 播放视频
  • 属性:
  • src: 告诉video标签需要播放的视频地址
  • autoplay: 告诉video标签是否需要自动播放视频
  • controls: 告诉video标签是否需要显示控制条
  • poster: 告诉video标签视频没有播放之前显示的占位图片
  • loop: 告诉video标签循环播放视频. 一般用于做广告视频
  • preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
  • muted:告诉video标签视频静音
  • width/height: 和img标签中的一模一样,设置视频的宽高
  • 格式2:
    <video>
    <source src="路径" type="video/格式">
    </video>
    *例如:
    <video>
    <source src="images/a.webm" type="video/webm">
    </video>
  • 作用:
  • video标签的第二种格式存在的意义就是为了解决浏览器适配问题.
  • 注意:
  • 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
  • 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

audio标签

  • 格式:
    <audio src="">
    </audio>
  • 作用:播放音频
  • audio属性:
  • src: 告诉audio标签需要播放的音频地址
  • autoplay: 告诉audio标签是否需要自动播放音频
  • controls: 告诉audio标签是否需要显示控制条
  • loop: 告诉audio标签循环播放音频.
  • preload: 告诉audio标签预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
  • muted:告诉audio标签音频静音
    *格式2:
    <audio>
    <source src="路径" type="audio/格式">
    </audio>
  • 作用:同上
  • 注意:
  • audio标签的使用和video标签的使用基本一样,只不过有3个属性不能用, height/width/poster

详情和概要标签

  • 格式:
    <details>
    <summary>概要信息</summary>
    详情信息
    </details>
  • 作用:
  • 利用summary标签来描述概要信息, 利用details标签来描述详情信息
  • 默认情况下是折叠展示, 想看见详情必须点击
事例.png

marquee标签

  • 格式;
    <marquee>内容</marquee>
  • 作用:跑马灯效果
  • 属性:
  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
  • 注意:
  • marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
  • 例子:

    <marquee>随便写点内容</marquee>
    <marquee direction="right">随便写点内容</marquee>
    <marquee direction="up">随便写点内容</marquee>
    <marquee direction="down">随便写点内容</marquee>

    <marquee scrollamount="1">随便写点内容</marquee>
    <marquee scrollamount="100">随便写点内容</marquee>

    <marquee loop="1">随便写点内容</marquee>

    <marquee behavior="slide">随便写点内容</marquee>
    <marquee behavior="alternate">随便写点内容</marquee>
    滚动图片:
    <marquee>


    %P})1MGYA1CGBH87_PI7I@9.png

相关文章

  • HTML多媒体

    今天学习了HTML传统的多媒体标签 和 标签。HTML多媒体主要包含视频、音频、动画等,在HTML中要插入这些...

  • H5视频&音频

    视/音频的发展 标签的作用是在HTML页面中嵌入多媒体元素 标签的作用是在HTML页面中嵌入多媒体元素 问题:...

  • HTML:多媒体标签

    video标签 • 作用: 播放视频• 格式1: • video标签的属性○ src: 告诉video标签需要播...

  • HTML多媒体标签

    video标签 格式1: 作用: 播放视频 属性: src: 告诉video标签需要播放的视频地址 autopla...

  • ## HTML基础-多媒体标签

    ## HTML基础-多媒体标签 # video标签 # audio标签 # marquee标签(跑马灯) H5新增...

  • CSS3新增1

    一、HTML5 新增标签 新增语义化标签 使用语义化标签的注意 二、多媒体音频标签 多媒体标签有两个,分别是 音频...

  • 小羊教程——HTML5多媒体标签

    本节主要内容是HTML5的多媒体标签audio和video 直接步入正题,HTML5的多媒体标签主要有两个vide...

  • html5入门教程(六)视频和音频

    html 4 中的语法 标签的作用是在 HTML 页面中嵌入多媒体元素 标签的作用是在 HTML 页面中嵌入...

  • HTML基础--多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性src: 告诉video标签需要播放的视频地址au...

  • html学习笔记

    列举一些常用的html标签 基本组件 文本内容 多媒体标签 表 表单内容

网友评论

      本文标题:HTML多媒体标签

      本文链接:https://www.haomeiwen.com/subject/iijtwttx.html