zoukankan      html  css  js  c++  java
  • html5的视频和音频

    HTML5 规定了一种通过 <video> 元素来包含视频的标准方法。

    HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

    接下来看一段代码,对就是这么简单,html5的视频、音频的实现就是以下两段html5标记语言。(将它放在你的<html></html>元素中就可以看到效果,另视频、音频内容自行添加。)

    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 元素。
    </video>
    <audio controls>
        <source src="music.ogg" >
        <source src="music.mp3" >
        您的浏览器不支持HTML5 audio 元素。
    </audio>

    video视频元素:

    <video> 元素提供了 播放、暂停和音量控件来控制视频。

    同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

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

    <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

    <video> 元素支持三种视频格式:MP4、WebM、Ogg。


    audio音频元素:

    control 属性供添加播放、暂停和音量控件。

    在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

    <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

    <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。


    接下来再看一段html5标记语言:

    <video width="320" height="240" controls src="movie.mp4" type="video/mp4">您的浏览器不支持 HTML5 video 元素。</video>
    <audio controls src="music.mp3">您的浏览器不支持HTML5 audio 元素。</audio>

    这样写也是可以实现视频、音频效果的,不过这样写的局限性就体现出来了,src属性只能引入一个文件格式。因为不同的浏览器厂商使用的视频、音频编解码器是不一样的,如果我们只定义了一种视频、音频格式,是不是在某些浏览器中就识别不出来,那么<source> 元素就是来解决这个问题的。使用<source> 元素来引入多个同一视频、音频的不同格式,这样就能保证在不同的浏览器中都能被识别。浏览器将使用第一个可识别的格式。


    HTML5 Audio/Video 属性(媒体元素)


    下边引入一个视频容器的概念:

    <video>、<audio>都是一组数据的容器,里边类似于压缩了一组文件(包括音频轨道、视频轨道、元数据:封面、标题、字母等,格式:.avi、.flv、.mp4、.mkv、.ogv等)。这些文件是很大的,就比如页面在加载一张比较大的图片的时候可能也得花上几秒钟,更何况是音频、视频文件呢!如果没有经过任何处理的话,音频、视频的加载时间就不是这么简单了。

    其实,在我们的浏览器中内嵌了一个音频、视频的编解码器,它的作用就是把原始的非常大视频容器,添加时编码,播放时解码。

    • 视频编解码器
      H.264 、 VP8 、 OggTheora

    • 音频编解码器
      AAC 、 MPEG-3 、 OggVorbis

  • 相关阅读:
    洛谷 P2053 :[SCOI2007]修车(拆点+最小费用流)
    LightOJ
    spark简单入门
    crontab 应用
    HttpClient的使用
    build.sbt的定义格式
    Scalatra
    SBT 构建scala eclipse开发
    mysql 存在更新,不存在插入
    Flash Vector例子
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/7131635.html
Copyright © 2011-2022 走看看