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>

  • 相关阅读:
    VS Code的使用
    跨平台C++ IDE
    windows CMakeLists.txt
    Windows引用opencv静态库
    【wpf】WPF程序处理多线程的两种方式
    【c#】System.Reflection.TargetInvocationException 调用的目标发生了异常/System.Threading.ThreadAbortException:正在中止线程
    【WinForm】Dev ProgressBarControl 使用汇总
    【WPF】UserControl用户控件怎么添加到Window窗体中
    【WPF】WPF无边框、窗体初始化位置与可拖拽窗体的解决方案
    【c#】未加载mscorlib.pdb/System.Reflection.TargetParameterCountException 未经处理的异常在mscorlib.dll中发生/参数计数不匹配
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8856170.html
Copyright © 2011-2022 走看看