视频与音频

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

(就这样了...)

原文地址:https://www.cnblogs.com/lzh739887959/p/5742726.html