zoukankan      html  css  js  c++  java
  • 视频与音频

    1.video(视频)

    带控制器的视频播放器:

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

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

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

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

    代码如下:

    <video width="320" height="240" controls >
        <source src="movie.ogg" type="video/ogg">
        <source src="movie.mp4" type="video/ogg">
        <p>你的流浪起不支持video标签</p>
    </video>

    属性说明:

    属性 信息
    autoplay autoplay 如果出现该属性,视屏在就绪后马上播放
    control control 显示视频中的简单元素。控制元素的外观由浏览器决定,与此属性无关。
    显示元素,譬如:播放、暂停、调节音量、跳播(若内容支持)、全屏显示,以及可能用到的字幕开关。
    loop loop 视频播放完后让浏览器自动从头播放
    muted muted 视频默认静音
    poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
    preload preload 如果出现该属性,则视频在页面加载时自动加载,并预备播放。如果出现”autoplay“,则忽略该属性
    src URL 要播放视屏的URL
    width pixels(px) 设置播放视频的宽度
    height pixels(px) 设置播放视频的高度

    视频格式:

    格式 MIME-type
    MP4 video/mp4
    WebM video/webm
    Ogg video/ogg

    使用DOM进行控制:

    HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

    <video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

    其中的方法有用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

    还没学到,以后补充

    2.audio(音频)

    带控制器的音频播放器

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

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

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

    代码如下:

    <audio width="320" height="240" control>
        <source src="song.ogg" type="audio/ogg">
        <source src="song.mp3" type="audio/mpeg  ">
        <p>你的浏览器不支持audio元素</p>
    </audio>

    属性说明:

    (- -!跟视频属性一样,除了少了没有poster属性)

    音频格式:

    格式 MIME-type
    MP3 audio/mpeg
    Ogg audio/ogg
    Wav audio/wav

    (就这样了...)

  • 相关阅读:
    ⛅剑指 Offer 11. 旋转数组的最小数字
    ✨Shell脚本实现Base64 加密解密
    Linux配置Nginx
    378. Kth Smallest Element in a Sorted Matrix
    875. Koko Eating Bananas
    278. First Bad Version
    704. Binary Search
    69. Sqrt(x)
    LeetCode 110 判断平衡二叉树
    LeetCode 43 字符串相乘
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5742726.html
Copyright © 2011-2022 走看看