zoukankan      html  css  js  c++  java
  • (5)html音频视频

    音频

    1、互联网常用的音频格式

    ogg

    有损的音频压缩技术

    免费的开源音频格式

    它可以在相对较低的数据速率下实现比MP3更好的音质

    mp3

    有损的音频压缩技术

    想使用MP3格式发布自己的作品,需要付给发明MP3的公司专利使用费

    wav

    无损压缩,浏览器支持差

    flac

    无损压缩

    aac

    音效速率公式

    音效速率水平≈容量(M)× 音效系数(C)÷音乐播放时间

    音乐播放时间≈容量(M)× 音效系数(C)÷位速

    音效系数每个格式是固定的,比如MP3的音效系数是136kbps/M

    2、

    格式:

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

    3、

    属性:

    属性描述
    autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    loop loop 如果出现该属性,则每当音频结束时重新循环开始播放。
    preload preload

    如果出现该属性,则音频在页面加载时进行加载,并预备播放。

    如果使用 “autoplay”,则忽略该属性。

    src url 要播放的音频的 URL。也可以使用<source>标签来设置音频。

    谷歌

    火狐

    IE9

     加载页面后自动、循环播放此URL连接里的音乐

    <body>
        <audio controls="controls" autoplay="autoplay" loop="loop">
            <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
    </body>

     去掉 controls="controls" 可以达到隐藏播放器的效果,这个挺有意思

    <body>
        <audio autoplay="autoplay" loop="loop">
            <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
    </body>

    视频

    <body>
        <video width="800" height="600" controls>
            <source src="movie.mp4" type="video/mp4">
        </video>
    </body>
    属性描述
    autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
    muted muted 规定视频的音频输出应该被静音。
    poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
    preload preload

    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。

    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。
  • 相关阅读:
    mysql 视图
    CSS 上下居中和最低高度语法
    escape()、encodeURI()、encodeURIComponent()区别详解
    YII事件EVENT示例
    linux history命令优化
    mysql 之full join
    redis学习之数据类型
    <canvas>设置宽高遇到的问题
    关于块级元素撑满整个浏览器窗口
    jquery中bind()绑定多个事件
  • 原文地址:https://www.cnblogs.com/buchizaodian/p/7076150.html
Copyright © 2011-2022 走看看