zoukankan      html  css  js  c++  java
  • HTML插入音频和视频:audio和video标签及其属性

    一、上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码

    <iframe height=498 width=510 src='http://player.youku.com/embed/XMTg1MjAzMTUwMA==' frameborder=0 'allowfullscreen'></iframe>

    二、audio 标签定义声音,比如音乐或其他音频流。

    1.audio支持三种音频格式ogg、mp3、wav,为了兼容性考虑,一般会引入其中的两种格式

    2.属性:

    autoplay 如果出现该属性,则音频在就绪后马上播放。(注:可以autoplay=“autoplay”这种写法,也可以直接写autoplay)

    controls 如果出现该属性,则向用户显示控件,比如播放按钮。(注:可以controls=“controls”这种写法,也可以直接写controls)

    loop 如果出现该属性,则每当音频结束时重新开始播放。(注:可以loop=“loop”这种写法,也可以直接写loop)

    preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。(load、auto、meta、none)

    src 要播放的音频的 URL。(可以和列子一样的写法,引入source单标签)

    3.下面是在Firefox浏览器的显示风格,其他浏览器显示风格不一样,可以通过css统一格式

    4.可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    <audio controls autoplay loop>
            <source src="/i/horse.ogg">
            <source src="/i/horse.mp3">
            <source src="/i/horse.wav">
    您的浏览器不支持 video 标签
    </audio>

    三、<video> 标签定义视频,比如电影片段或其他视频流。

    1.video支持三种音频格式ogg、mp4、webm,为了兼容性考虑,一般会引入其中的两种格式

    2.属性:

    autoplay 如果出现该属性,则视频在就绪后马上播放。(注:可以autoplay=“autoplay”这种写法,也可以直接写autoplay)

    controls 如果出现该属性,则向用户显示控件,比如播放按钮。(注:可以controls=“controls”这种写法,也可以直接写controls)

    loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。(注:可以loop=“loop”这种写法,也可以直接写loop)

    preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。(load、auto、meta、none)

    src要播放的视频的 URL。(可以和列子一样的写法,引入source单标签)

    width和height 设置视频播放器的宽度和高度。

    3.下面是在Firefox浏览器的显示风格,其他浏览器显示风格不一样,可以通过css统一格式

    4.可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    <video controls autoplay loop>
                <source src="/i/movie.ogg">
                <source src="/i/movie.mp4">
                <source src="/i/movie.webm">
                您的浏览器不支持 video 标签!
    </video>

  • 相关阅读:
    Chrome滚动条透明的问题
    JavaScript版的简单动画
    关于AS3的事件移除释疑
    JavaScript的Hook
    JavaScript正则表达式的零宽断言
    webgame开发中的文件解密
    GMIC2011:熊俊谈从数据看iOS移动应用开发
    世上最伟大的十个公式
    OS X Lion 正式版制作安装盘全新安装方法说明
    市面上VB.NET的书比较少,推荐一本,下载地址在下面!
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8856170.html
Copyright © 2011-2022 走看看