第17章 视频、音频和其他多媒体

2018-03-01 18:35:24 《HTML5与CSS3基础教程》笔记 阅读: 245

添加视频

格式:

<video src="video-url"></video>

video属性

  • src 指定视频文件的URL
  • autoplay 设置视频自动播放
  • controls 添加浏览器的默认控件
  • muted 静音
  • loop 循环播放
  • poster 指定视频播放前的图像(海报),用URL指定图像文件
  • width 视频窗口的宽度
  • height 视频窗口的高度
  • preload 预加载视频,值:
  • none 不预加载
  • metadata 仅加载视频的元数据(长度、尺寸等基本信息)
  • auto 由浏览器决定(默认值)

设置视频自动播放

设置自动播放:

<video src="video-url" autoplay controls></video>

为视频添加控件

添加控件:

<video src="video-url" controls></video>

设置视频循环播放

添加控件:

<video src="video-url" loop controls></video>

设置视频海报

添加控件:

<video src="video-url" poster="img-url" controls></video>

添加音频

格式:

<audio src="audio-url"></audio>

audio属性:

  • src 指定视频文件的URL
  • autoplay 设置自动播放
  • controls 显示浏览器的默认控件, 若不设置此属性则不显示窗口,可以用来添加背景音乐
  • muted 静音
  • loop 循环播放
  • poster 指定视频播放前的图像(海报),用URL指定图像文件
  • preload 预加载视频,值:
  • none 不预加载
  • metadata 仅加载视频的元数据(长度、尺寸等基本信息)
  • auto 由浏览器决定(默认值)
    这些属性使用和视频相同,所以下面就不介绍了

设置备用视频和音频

在video标签或audio中使用多个source标签来添加多个备用视频或音频,浏览器会加载第一个它支持的视频或音频

格式:

<source src="video-url" ></source>

source属性:

  • src 指定视频文件的URL
  • type 指定视频文件的类型,对于视频的值有:video/mp4、video/webm、video/ogg
  • 对于音频的值有:audio/mp4、audio/webm、audio/ogg
  • media 指定视频来源的css媒体查询, 从而适应不同的终端

版权声明:本文为博主原创文章,转载需注明来自: 洛洛の空间


功能
最新评论